How to clear div floating with css

3. Clear floating using the after pseudo object

This method is only applicable to non-IE browsers. For more information, see the following example. Pay attention to the following points during use. 1. In this method, height: 0 must be set for the pseudo object to clear the floating element; otherwise, the element will be several pixels higher than the actual one; 2. The content attribute is required, however, the value can be blank. When Blue is ideal, the value of the content attribute is set ". ", but I found that it is also possible to be empty.

<Style type = "text/css">
<! -
* {Margin: 0; padding: 0 ;}
Body {font: 36px bold; color: # F00; text-align: center ;}
# Layout {background: # FF9 ;}
# Layout: after {display: block; clear: both; content: ""; visibility: hidden; height: 0 ;}
# Left {float: left; width: 20%; height: 200px; background: # DDD; line-height: 200px ;}
# Right {float: right; width: 30%; height: 80px; background: # DDD; line-height: 80px ;}
->
</Style>

<Div id = "layout">
<Div id = "left"> Left </div>
<Div id = "right"> Right </div>
<P class = "clr">
</Div>

The Blue part is the public supply part.

2. Clear floating with empty tags

The empty tag can be a div tag or a P tag. I am used to using <P>, which is short enough, and many people use

<Style type = "text/css">
<! -
* {Margin: 0; padding: 0 ;}
Body {font: 36px bold; color: # F00; text-align: center ;}
# Layout {background: # FF9 ;}
# Left {float: left; width: 20%; height: 200px; background: # DDD; line-height: 200px ;}
# Right {float: right; width: 30%; height: 80px; background: # DDD; line-height: 80px ;}
. Clr {clear: both ;}
->
</Style>
3. Use the overflow attribute
This method effectively solves the drawbacks of adding unintentional code by clearing the floating through the empty tag element. To use this method, you only need to define the CSS attribute overflow: auto in the element to be cleared !" Zoom: 1 & Prime; compatible with IE6.

<Style type = "text/css">
<! -
* {Margin: 0; padding: 0 ;}
Body {font: 36px bold; color: # F00; text-align: center ;}
# Layout {background: # FF9; overflow: auto; zoom: 1 ;}
# Left {float: left; width: 20%; height: 200px; background: # DDD; line-height: 200px ;}
# Right {float: right; width: 30%; height: 80px; background: # DDD; line-height: 80px ;}
->
</Style>