Optimal method for clearing floating in web design

Overflow can also be used to clear the floating method. It is really easy to add the overflow attribute to the label to clear the floating.
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:
Complete Demo
Here, zoom is prepared for IE6.
Complete Demo
Note: If you forget a very important item, not all overflow attributes can have the same effect. For example, the visible attribute can only work for IE. For example, see Demo2.
In this case, there is a problem. If there is a height, and the content exceeds the height, the definition of auto or hidden may have some undesirable effects. Here is a solution: For IE of IE6 and earlier versions, the height can be defined directly; for IE7, FF, OP, min-height can be defined.
CSS code:
Overflow
{
Height: auto;
_ Height: 200px;
Min-height: 200px;
Verflow: auto;
Zoom: 1;
_ Overflow: visible;
}