Advantages and Disadvantages of Seven Methods to Use CSS to Clear Floats

1, parent p definition height

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/height:200px;} 
.p2{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> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

Principle: Parent p manually defines height, which solves the problem that parent p cannot automatically obtain the height.

Advantages: simple, less code, easy to master

Disadvantages: only suitable for layouts with a fixed height. To give a precise height, problems will occur if the height is different from the parent p

Recommendation: It is not recommended. It is only recommended to use

2 for a fixed-height layout, and add an empty p tag at the end clear:both

<style type="text/css"> 
.p1{background:#000080;border:1px solid red} 
.p2{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} 
/*清除浮动代码*/ 
.clearfloat{clear:both} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
<p class="clearfloat"></p> 
</p> 
<p class="p2"> 
p2 
</p>

Principle: Add an empty p, use the clear:both improved by CSS to clear the float, so that the parent p can automatically obtain the height

Advantages: Simple, less code, good browser support, not prone to strange problems

Disadvantages: Many beginners do not understand the principle; if the page floating layout is too many, a lot of empty ps will be added, which makes people feel bad

Suggestion: Not recommended Use, but this method is a clear floating method that was mainly used before

3, parent p definitionpseudo class:after and zoom

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;} 
.p2{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} 
/*清除浮动代码*/ 
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfloat{zoom:1} 
</style> 
<p class="p1 clearfloat"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

Principle: Only IE8 and above and non-IE browsers support:after. The principle is somewhat 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: a lot of code Beginners don’t understand the principle, so they need to use two lines of code in order to be supported by mainstream browsers.

Recommendation: It is recommended to use it. It is recommended to define public classes to reduce CSS code.

4, parent p definition overflow:hidden

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden} 
.p2{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> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

Principle: width or zoom:1 must be defined, and height cannot be defined. When using overflow:hidden, browse The browser will automatically check the height of the floating area

Advantages: simple, less code, good browser support

Disadvantage: cannot be used in conjunction with position, because the exceeded size will be hidden.

Recommendation: Only recommended for friends who have not used position or have a deep understanding of overflow:hidden.

5, the parent p defines overflow:auto

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto} 
.p2{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> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

Principle: width or zoom:1 must be defined, and height cannot be defined. When using overflow:auto, the browser will automatically check the floating area The height

Advantages: Simple, less code, good browser support

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

Suggestion: Not recommended, use it if you need scroll bars to appear or to ensure that scroll bars do not appear in your code.

6, the parent p also floats together

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left} 
.p2{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> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

Principle: All codes float together and become a whole

Advantages: No advantages

Disadvantages: New floating problems will occur.

Suggestion: Not recommended for use, only for understanding.

7, parent p defines display:table

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;} 
.p2{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> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

Principle: Turn p attribute into table

Advantages: No advantages

Disadvantages: New unknown problems will arise.

Suggestion: Not recommended for use, only for understanding.

8, add br tag at the end clear:both

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1} 
.p2{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> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
<br class="clearfloat" /> 
</p> 
<p class="p2"> 
p2 
</p>

The above is the detailed content of Advantages and Disadvantages of Seven Methods to Use CSS to Clear Floats. For more information, please follow other related articles on the PHP Chinese website!