CSS: The best way to clear floats

In the CSS Forest group to discuss a margin problem inadvertently found overflow can also be used to clear the float, hey, this method is not only simple to use, but also FF, OP, IE7 support, from then on the long compatibility and poor FF clear floating method.

The method is really simple, as long as you add the overflow this property to the label that needs to be floated.

CSS Code

ul{
List-style:none;
Height:auto;
Margin:0;p
adding:0;
Background-color: #436973;
}
li{
Float:left;
width:80px;
height:80px;
Background-color: #83B1DF;
}
. demo{
Clear:both;
border:1px solid #FF00FF;
margin-bottom:5px;
}
. overflow{
Overflow:auto;
Zoom:1;
Background-color: #43FF73;
}
ul{
List-style:none;
Height:auto;
margin:0;
padding:0;
Background-color: #436973;
}
li{
Float:left;
width:80px;
height:80px;
Background-color: #83B1DF;
}
. demo{
Clear:both;
border:1px solid #FF00FF;
margin-bottom:5px;
}
. overflow{
Overflow:auto;
Zoom:1;
Background-color: #43FF73;
}

HTML code

<div class= "Demo" >
<ul class= "Overflow" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<div class= "Demo" >
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>

One of the zoom was prepared for IE6.

The full demo

Webjx.com

Note: Forget a very important content, not all overflow properties can get up the same effect, such as the visible attribute can only work on IE. Examples can be seen here Demo2
So there is a problem, if you want to have a height, and the content is beyond the height, the definition of auto or hidden may have some unwanted effect. Here is a solution: for IE6 and the following versions of IE, you can define the height directly; for IE7, FF, OP, you can define min-height.

CSS Code

Overflow
{
Height:auto;
_height:200px;
min-height:200px;
Verflow:auto;
Zoom:1;
_overflow:visible;
}

Closed floating element: Overflow:auto for Firefox. Use *height:1% or zoom:1 for IE. Personally feel overflow:auto less use for the good, there will be some problems.
It's best to use this method:

. clearfix:after {
Content: ".";
Display:block;
height:0;
Clear:both;
Visibility:hidden;
}
/* Hides from IE-MAC * *
* HTML. Clearfix {height:1%}
/* End Hide from Ie-mac * *