Reference to the original text: http://www.cnblogs.com/fengzheng126/archive/2012/05/19/2508778.html

There are three common methods to remove floats.
This is the floating source code that has not been cleared. The running code cannot see the light yellow background of the parent element.

<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;}
–>
</style>
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
</div>

The three methods of clearing floating are as follows:
1. Use empty labels to clear floats. I've used a long way. Empty labels can be div labels or P labels. I'm used to < P >, short enough, and many people use < HR >, just need to clear the border for it, but in theory it can be any label. This is done by adding a label to clear all floating elements within the floating parent element and defining the CSS code for it: clear:both. The disadvantage of this method is that it adds meaningless structural elements.

It is recommended by W3C to use additional labels to clear floating elements. As for whether to use < br /> elements or empty < div > </div > you can choose according to your preferences (of course, you can use other block-level elements as well). However, it should be noted that < br /> itself has performance, it will have an additional line change, so set its heigh to 0 to hide its performance. So in most cases empty < div > is more appropriate.

<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>
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
<p class="clr"> </p>
</div>

2. Use the overflow attribute. This method effectively solves the disadvantage of having to add unintentional code by clearing floating through empty label elements. Using this method, you only need to define CSS attributes in the elements that need to clear floating: overflow:auto!!! zoom:1 is compatible with IE6, or width:100%.
However, overflow may have an impact on page performance, and the impact is uncertain. You'd better be able to test your page on multiple browsers.
　　

<style type="text/css">
<!–
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;overflow:auto;zoom:1; }/* overflow:auto Can be replaced by overflow:hidden, zoom:1 can be replaced by width:100%*/
#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>
</div>

3. Use after pseudo-object to clear floating. This method is only applicable to non-IE browsers. The following examples can be used for reference. The following points should be noted in use. First, the method must set height:0 for the pseudo-object that needs to clear floating elements, otherwise the element will be several pixels higher than the actual; second, content attribute is necessary, but its value can be empty, blue ideal when discussing the method, content attribute value is set to ".", but I found that empty is also possible.

<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>
</div>

Each of these three methods has its advantages and disadvantages, and should be chosen when using them.