A complete guide to clearing floats in CSS (summary)

1. Parent div defines pseudo-classes: after and zoom

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   
   /*Clear floating code*/
   .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
   .clearfloat{zoom:1}
   </style> 
<div class="div1 clearfloat"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div>
<div class="div2">
   div2
   </div>

Principle: Only IE8 and above and non-IE browsers support :after. The principle is similar to method 2. Zoom (IE conversion has attributes) can solve the floating problem of IE6 and IE7.

Advantages: good browser support, less likely to have strange problems (currently: used by large websites, such as Tencent, NetEase, Sina, etc.)

Disadvantages: There are too many codes, and many beginners do not understand the principle. Two codes must be used together to make mainstream browsers support it.

Recommendation: It is recommended to define common classes to reduce CSS code.

Rating: ★★★★☆

2. Add an empty div tag clear:both at the end

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   
   /*Clear floating code*/
   .clearfloat{clear:both}
   </style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">
   div2
   </div>

Principle: Add an empty div, use the clear:both method in CSS to clear the float, so that the parent div can automatically get the height

Advantages: simple, less code, good browser support, less likely to have strange problems

Disadvantages: Many beginners do not understand the principle; if there are many floating layouts on the page, a lot of empty divs will be added, which makes people feel uncomfortable

Recommendation: Not recommended, but this method was previously used as a method to clear floats

Rating: ★★★☆☆

3. Parent div defines height

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;/*Solution code*/height:200px;}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   </style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div>
<div class="div2">
   div2
   </div>

Principle: Manually defining the height of the parent div solves the problem that the parent div cannot automatically obtain the height

Advantages: simple, less code, easy to master

Disadvantages: Only suitable for layouts with fixed heights. You need to give an exact height. If the height is different from the parent div, problems will occur.

Recommendation: Not recommended, only recommended for layouts with fixed height

Rating: ★★☆☆☆

4. Parent div defines overflow:hidden

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;/*Solution code*/width:98%;overflow:hidden}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   </style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
</div>
<div class="div2">
   div2
   </div>

Principle: You must define width or zoom:1, and you cannot define height. When using overflow:hidden, the browser will automatically check the height of the floating area.

Advantages: simple, less code, good browser support

Disadvantages: cannot be used with position, because the size exceeding the limit will be hidden.

Recommendation: This is only recommended for those who have not used position or have a deep understanding of overflow:hidden.

Rating: ★★★☆☆

5. Parent div defines overflow:auto

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;/*Solution code*/width:98%;overflow:auto}
   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   </style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
</div>
<div class="div2">
   div2
   </div>

Principle: You must define width or zoom:1, and you cannot define height. When using overflow:auto, the browser will automatically check the height of the floating area.

Advantages: simple, less code, good browser support

Disadvantage: When the internal width and height exceed the parent div, a scroll bar will appear.

Recommendation: Not recommended. Use this method only if you need scroll bars to appear or if you want to ensure that your code will not cause scroll bars to appear.

Rating: ★★☆☆☆

6. The parent div also floats together

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;/*Solution code*/width:98%;margin-bottom:10px;float:left}
   .div2{background:#800080;border:1px solid red;height:100px;width:98%;/*Solution code*/clear:both}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   </style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
</div>
<div class="div2">
   div2
   </div>

Principle: All codes float together and become a whole

Advantages: No advantages

Disadvantages: New floating problems will arise.

Recommendation: Not recommended, just for understanding.

Rating: ★☆☆☆☆

7. Parent div defines display:table

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;/*Solution code*/width:98%;display:table;margin-bottom:10px;}
   .div2{background:#800080;border:1px solid red;height:100px;width:98%;}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   </style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
</div>
<div class="div2">
   div2
   </div>

Principle: Convert div attributes into a table

Advantages: No advantages

Disadvantages: New unknown problems will arise

Recommendation: Not recommended, just for understanding

Rating: ★☆☆☆☆

8. Add br tag clear:both at the end

<style type="text/css"> 
   .div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
   .div2{background:#800080;border:1px solid red;height:100px}
   
   .left{float:left;width:20%;height:200px;background:#DDD}
   .right{float:right;width:30%;height:80px;background:#DDD}
   
   .clearfloat{clear:both}
   </style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
<br class="clearfloat" />
</div>
<div class="div2">
   div2
   </div>

Principle: The parent div defines zoom:1 to solve the IE floating problem, and adds a br tag clear:both at the end

Recommendation: Not recommended, just for understanding

Rating: ★☆☆☆☆

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Implementation of mysql data type conversion

>>: W3C Tutorial (9): W3C XPath Activities