Summary of common methods for clearing floats in CSS CSS clear both {overflow:auto;zoom:1;}

Commonly used methods to clear floats are the following three:

This is the floating source code that has not been cleared, and the parent cannot be seen when running the code Elements 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>
<p id=”layout”>
<p id=”left”>Left</p>
<p id=”right”>Right</p>
</p>

Three ways to clear floats are as follows:

1. Use empty tags to clear float. A method I have used for a long time, the empty tag can be a p tag or a P tag. I am used to using

, which is short enough, and many people also use

---

. They just need to clear the border for it, but in theory it can be any label. This method is to add such a label to clear the float after all floating elements inside the floating parent element need to be cleared, and define the CSS code for it: clear:both. The disadvantage of this approach is the addition of meaningless structural elements.

It is W3Crecommended practice to use additional tags to clear floats (close floating elements). As for using the
element or empty

, you can choose according to your own preferences (of course you can also use other block-level elements). However, it should be noted that
itself has performance, it will have an extra line break, so its height must be set to 0 to hide its performance. So in most cases it is more appropriate to use empty

.

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

2. Use the overflow attribute. This method effectively solves the disadvantage of having to add unintentional code by clearing floats through empty label elements. To use this method, you only need to define the CSS property: overflow:auto in the element that needs to be cleared of floating, and that's it! "zoom:1" is used to be compatible with IE6, and width:100% can also be used.

However, when using overflow, it may have an impact on page performance, and this impact is uncertain. It is best to test your results on multiple browsers. Page;

<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可以换成overflow:hidden，zoom:1可以换成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>
<p id=”layout”>
<p id=”left”>Left</p>
<p id=”right”>Right</p>
</p>

3. Use the after pseudo-object to clear the float. This method is only applicable to non-IE browsers. Please refer to the following examples for specific writing methods. Please pay attention to the following points during use. 1. In this method, height:0 must be set for the pseudo object that needs to clear the floating element, otherwise the element will be several pixels higher than the actual one; 2. The content attribute is necessary, but its value can be empty, blue ideal discussion In this method, the value of the content attribute is set to ".", but I found that it is also possible to leave it 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>
<p id=”layout”>
<p id=”left”>Left</p>
<p id=”right”>Right</p>
</p>

These three methods have their own advantages and disadvantages. You should choose the best when using them. I am personally accustomed to the first method, which is more stable and reliable.

The above is the detailed content of Summary of common methods for clearing floats in CSS CSS clear both {overflow:auto;zoom:1;}. For more information, please follow other related articles on the PHP Chinese website!