Several ways to clean up the floating CSS

This is not clear floating source code, run code can not see the parent element light yellow background.

<style type="Text/css"><!–*{margin:0;p adding:0;} BODY{FONT:36PX bold; color: #F00; text-Align:center;} #layout {background: #FF9;} #left {float: left;width: -%;height:200px;background: #DDD; line-height:200px;} #right {float: right;width: -%;height:80px;background: #DDD; line-height:80px;} –></style><div id="Layout"><div id=" Left">left</div><div id=" Right">Right</div></div>

before the float is cleared:

Four ways to clear float are as follows:

1. Use empty The label clears the float.

I used a long way, empty tags can be a div tag, or it can be a P tag.

This is done when you need to clear all the floating elements inside the floating parent element and add such a label to clear the float and define the CSS code for it: Clear:both.

The disadvantage of this approach is to add meaningless structural elements.

For the use of additional labels to clear floating (closed floating elements), is the recommended practice.

as for the use <br/> Element or empty <div></div> can be selected according to your preference (you can also use its it block-level elements).

However, it is important to note that the <br/> itself is expressive, it will be more than a newline come, so set its heigh to 0 to hide its performance. So the use of empty <div> is more appropriate in most cases.

<style type="Text/css"> <!–*{margin:0;p adding:0;} BODY{FONT:36PX bold; color: #F00; text-Align:center;}    #layout {background: #FF9;} #left {float: left;width: -%;height:200px;background: #DDD; line-height:200px;} #right {float: right;width: -%;height:80px;background: #DDD; line-height:80px;}    . Clear{clear:both;} –> </style> <div id="Layout"> <div id=" Left">Left</div> <div id=" Right">Right</div> <divclass="Clear"> </div> </div>

2. Use the overflow property .

This method effectively solves the drawback of having to increase the unintentional code by clearing the float with an empty label element.

Using this method is simply to define the CSS properties in the element that needs to clear the float:

Overflow:auto, you can! You can also use Overflow:hidden; "Zoom:1″ for compatibility with IE6, or width:100%.

However, the use of overflow may have an impact on page performance, and this effect is uncertain , you'd better be able to test your page on multiple browsers;

<style type="Text/css"><!–*{margin:0;p adding:0;} BODY{FONT:36PX bold; color: #F00; text-Align:center;} #layout {background: #FF9; Overflow:auto;zoom:1; }/*Overflow:auto can be replaced with overflow:hidden,zoom:1 can be replaced by width:100%*/#left {float: left;width: -%;height:200px;background: #DDD; line-height:200px;} #right {float: right;width: -%;height:80px;background: #DDD; line-height:80px;} –></style><div id="Layout"><div id=" Left">left</div><div id=" Right">Right</div></div>

3, use after pseudo-object universal clear floating . You can refer to the following example for specific wording.

<style type="Text/css"><!–*{margin:0;p adding:0;} BODY{FONT:36PX bold; color: #F00; text-Align:center;} #layout {background: #FF9;} #layout {*zoom:1} #layout: after{content:'\20';d Isplay:block;height:0; Clear:both} #left {float: left;width: -%;height:200px;background: #DDD; line-height:200px;} #right {float: right;width: -%;height:80px;background: #DDD; line-height:80px;} –></style><div id="Layout"><div id=" Left">left</div><div id=" Right">Right</div></div>

4, floating external elements,float-in-float. This approach is simple, which is to float the "#outer" element (left or right).

but the other problem with this approach is that the next element adjacent to the "#outer" will be The position of the "#outer" will change, so use this method with caution.

have the option to put the page all the elements in the list are floating, and finally using an appropriate meaningful element (such as a footer) to clearing floats, which helps reduce unnecessary markup, but too much floating can increase the difficulty of the layout.

<style type="Text/css"><!–*{margin:0;p adding:0;} BODY{FONT:36PX bold; color: #F00; text-Align:center;} #layout {background: #FF9;float: Left;} #left {float: left;width: -%;height:200px;background: #DDD; line-height:200px;} #right {float: right;width: -%;height:80px;background: #DDD; line-height:80px;} –></style><div id="Layout"><div id=" Left">left</div><div id=" Right">Right</div></div>