Summary of Common Methods for Clearing Floats in CSS_Experience Exchange

There are three commonly used methods to clear floats.
This is the floating source code that has not been cleared. The light yellow background of the parent element cannot be seen when running the code.                                                                                     

<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>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh to execute]

1. Use empty tags to clear floats. A method I have used for a long time is that the empty tag can be a div tag or a P tag. I am used to using

, which is short enough. 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 tag to clear float after all floated elements inside the floated 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.

<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>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it to execute]

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 for compatibility with IE6.

<style type="text/css"> <!-- *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;overflow:auto;zoom:1;} #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>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it before executing]

3. Use the after pseudo-object to float clearly. This method only applies 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 value; 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> <div id="layout"> <div id="left">Left</div> <div id="right">Right</div> </div>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it before execution]

These three methods all have certain disadvantages, and you should choose the best when using them. choice, the second method is more preferable in comparison. The above methods are not original and are all sourced from the Internet. They are compiled here. The original author reserves all rights.