Methods of clearing floats and their pros and cons

Why is it so hard to clear CSS floats?

Because floating will make the current label float upward, and it will also affect the position of the front and rear labels, the parent label and the width and height properties.
Moreover, the same code may display different effects in various browsers, which makes it more difficult to clear the float.

There are various ways to solve the problem caused by floating, but some of them have problems with browser compatibility.

According to my own experience, I summarize 8 methods to clear the float (the test has passed the ie chrome firefox opera, and the last three methods can only be understood):

1. The parent div defines height

<style type="text/css">
   .div1{background:#000080;border:1px solid red;/*solve 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: The parent div manually defines the height, which solves the problem that the parent div cannot automatically obtain the height
• Advantages: simple, less code, easy to master
• Disadvantages: only suitable for fixed-height layouts, to give an accurate height, if the height is not the same as the parent div, it will cause problems
• Recommendation: Not recommended, only recommended for fixed-height layouts
• Rating: ★★☆☆☆

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

<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 clear:both improved by css to clear the float, so that the parent div can automatically get the height
• Advantages: simple, less code, good browser support, not prone to strange problems
• Disadvantages: Many beginners do not understand the principle; if there are many floating layouts on the page, it is necessary to add a lot of empty divs, which makes people feel very uncomfortable
• Suggestion: Deprecated, but this method was previously used primarily as a clearing float method
• Rating: ★★★☆☆

3. The 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: IE8 and above and non-IE browsers only support: after, the principle is similar to method 2, zoom (IE transfer has attributes) can solve the floating problem of ie6 and ie7
• Advantages: good browser support, not prone to strange problems (currently: used by large websites, such as Tencent, Netease, Sina, etc.)
• Disadvantages: There is a lot of code, and many beginners do not understand the principle. It takes two sentences of code to be used together in order to be supported by mainstream browsers.
• Recommendation: Recommended, it is recommended to define public classes to reduce CSS code
• Rating: ★★★★☆

4. The parent div defines overflow: hidden

<style type="text/css">
   .div1{background:#000080;border:1px solid red;/*解决代码*/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: width or zoom: 1 must be defined, and height cannot be defined at the same time. 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 excess size will be hidden
• Suggestion: Only recommend friends who do not use position or have a deep understanding of overflow:hidden
• Rating: ★★★☆☆

5. The parent div defines overflow:auto

<style type="text/css">
   .div1{background:#000080;border:1px solid red;/*solve 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: width or zoom: 1 must be defined, and height cannot be defined at the same time. When overflow: auto is used, the browser will automatically check the height of the floating area
• Advantages: simple, less code, good browser support
• Disadvantage: When the inner width and height exceed the parent div, scroll bars will appear.
• Recommendation: Not recommended, use it if you need scrollbars or make sure your code doesn't show scrollbars.
• Rating: ★★☆☆☆

6. The parent div also floats together

<style type="text/css">
   .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left}
   .div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/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
• Pros: no pros
• Disadvantage: New float problems will be created.
• Recommendation: Not recommended, just for understanding.
• Rating: ★☆☆☆☆

7. The parent div defines display:table

<style type="text/css">
   .div1{background:#000080;border:1px solid red;/*解决代码*/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: Turn the div attribute into a table
• Pros: no pros
• Disadvantage: will create new unknown problems
• Suggestion: Not recommended, just for understanding
• Rating: ★☆☆☆☆

8. Add the br tag at the end clear:both

<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 add the br tag clear:both at the end
• Suggestion: Not recommended, just for understanding
• Rating: ★☆☆☆☆