CSS Clear Floating Method summary

Using the XHTML+CSS layout is often used to float, many of the scary things are likely to be floating in the mischief, then clear the float is necessary to do, and at any time to clear the parent element floating is also considered to be a good habit of writing CSS.

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

<style type= "Text/css" >body {font-size:24px; color:red;} #layout {background: #FF0;} #left {float:left; width:20%; height:200px; background: #CCC;} #right {float:right; width:30%; height:80px; background: #CCC;} </style><p id= "Layout" ><p id= "left" >left</p><p id= "right" >Right</p>

Before the float is cleared:

Three ways to clear the float are as follows:

1. Use an empty label to clear the float.

I used a long way, the empty tag can be a P tag, or it can be a label such as P/SPAN/BR, in theory can be any label. 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.

PS:<BR clear= "All"/> can also achieve the effect.

<style type= "Text/css" >body {font-size:24px; color:red;} #layout {background: #FF0;} #left {float:left; width:20%; height:200px; background: #CCC;} #right {float:right; width:30%; height:80px; background: #CCC;}. CLR {clear:both;} </style><p id= "Layout" ><p id= "left" >left</p><p id= "right" >right</p><p style = "Clear:both"/></p>

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! The Zoom:1″ is used for compatibility with IE6.

<style type= "Text/css" >body {font-size:24px; color:red;} #layout {background: #FF0; overflow:auto; zoom:1;} #left {float:left; width:20%; height:200px; background: #CCC;} #right {float:right; width:30%; height:80px; background: #CCC;} </style>
3. Use after pseudo object to clear float.

This method applies only to non-ie browsers . You can refer to the following example for specific wording. Attention should be paid to the following points in use.
The method must be set height:0 in the pseudo-object that needs to clear the floating element, otherwise the element will be higher than the actual number of pixels;
The content property is required, but its value can be empty, and the value of the Content property is set to "." When discussing the method online, but I find it is ok to empty it.

<style type= "Text/css" >body {font-size:24px; color:red;} #layout {background: #FF0;  } #layout: after{display:block;clear:both; Content: ""; visibility:hidden;height:0;} #left {float:left; width:20%; height:200px; background: #CCC;} #right {float:right; width:30%; height:80px; background: #CCC;} </style><p id= "Layout" ><p id= "left" >left</p><p id= "right" >Right</p>
After clearing floating:


Each of the three methods have advantages and disadvantages, the use should be preferred, compared to the second method is preferable.