What are the methods for clearing floats in CSS?

Floating---- will cause the current label to float up, causing the height of the parent label to collapse

1. Specify the height for the parent element

　<div style="height:200px">

　　<div style="float:right"></div>

　　</div>

　 Simple and crude! The height is variable, and if the internal height is greater than the parent, problems may easily arise

2. Add additional tags after the floating element

　　<div>

　　　<div style="float:right"> </div>
　　　<div style="clear:both"></div>

　 </div>

　 Other<p> <br/> tags can also be produced Empty tags lead to confusing code, difficult to maintain, and the intuitive feeling of the code is very bad

3. Add overflow:hidden;zoom:1 or overflow:hidden;width:98% style to the parent tag　　&lt ;div style="overflow:hidden; zoom:1">

　　<div style="float:right"></div>

　　</div>

　 Zoom:1 is added for compatibility In IE6, there must be one of zoom and width, but the height value cannot be set. The browser can automatically obtain the height of the floating area,

　 and cannot be used together with position, because it will cause the problem of hiding beyond the size.

4. Set overflow:auto for the parent tag　<div style="overflow:auto; zoom:1">

　　<div style="float:right"></ div>

　</div>

　 It is basically the same as 3, the only problem is that if the internal height is higher than the parent, a roller will appear

5. Add float to the parent element, and everyone will become one The overall floating block　　<div style="float:left; zoom:1">

　　<div style="float:right"></div>

　</div>

　 Will cause new floating problems

6. Add display: table to the parent tag 　 <div style="display:table; zoom:1">

　　; ;div style="position:absolute; zoom:1">

　　<div style="float:right"></div>

　　</div>

　 It is connected with the 5 principles, both Detaching the parent element from the original text flow may cause similar problems, but you can still use this method to solve it

8. Define the pseudo-class: after for the parent tag, and zoom: 1

　.clearfix:after { display:block; clear:both; content:""; visibility:hidden; height:0}

　.clearfix {zoom:1}

　<div class="clearfix">

　　<div style=" float:right"></div>

　</div> Only IE8 and above and non-IE browsers support:after, zoom:1 can solve browser compatibility issues

The above is the detailed content of What are the methods for clearing floats in CSS?. For more information, please follow other related articles on the PHP Chinese website!