Reprint-commonly used to clear floating methods have the following three kinds:

There are three common ways to clear floats:

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

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

Three ways to clear the float are as follows:

1. Use an empty label to clear the float. I used a long way, empty tags can be a div tag, or it can be a P tag. I'm used to <p>, short enough, and a lot of people with <HR>, just need to clear the border for it, but in theory it 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.

For the use of additional labels to clear floating (closed floating elements), is the recommended practice. As for the use of <br/> elements or empty <div></div> can be selected according to their preferences (of course you can also use other block-level elements). However, it is important to note that <br/> itself has a performance, it will be more than a newline, so to 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;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 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! "Zoom:1″ is used for compatibility with IE6, and can also be used with width:100%.

However, the use of overflow may affect the performance of the page, 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 with 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 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; second, the content property is required, but its value can be empty, blue ideal when discussing this method, the value of the Content property is set to ".", But I find it 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></div>

Each of the three methods have advantages and disadvantages, use should be preferred choice, personal accustomed to the first, more stable and reliable.

Reprint-commonly used to clear floating methods have the following three kinds: