The pros and cons of using CSS to clear floating seven ways

1, parent p defines height

<style type= "Text/css" >. P1{background: #000080; border:1px solid red;/* Solution code */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: The parent P manually defines the height, which solves the problem that the parent P cannot automatically get to the heights.

Advantages: Simple, less code, easy to master

Disadvantage: only suitable for highly fixed layout, to give the exact height, if the height and the parent p is not the same when the problem arises

Recommendation: Not recommended, only recommended for highly fixed layouts when used

2, at the end of the Add empty P label 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}/* Clear floating Code */. 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 CSS to improve the clear:both clear floating, so that the parent P can automatically get to 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 more, it is necessary to add a lot of empty p, people feel very bad

Recommendation: Deprecated, but this method is a major use of the previously used to clear the floating method

3, parent p defines pseudo-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}/* Clear floating Code */. 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: IE8 above and non-IE browser support: After, principle and method 2 somewhat similar, zoom (ie turn to have attribute) can solve ie6,ie7 floating problem

Advantages: Browser support is good, not prone to strange problems (currently: large sites are used, such as: Tencent, NetEase, Sina, etc.)

Disadvantages: Many code, many beginners do not understand the principle, to use two code together to let the mainstream browser support.

Recommendation: recommended, we recommend defining public classes to reduce CSS code.

4, parent P-defined Overflow:hidden

<style type= "Text/css" >. P1{background: #000080; border:1px solid red;/* Fix Code */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, and when using Overflow:hidden, the browser automatically checks the altitude of the floating area

Pros: Simple, less code, good browser support

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

Recommendation: It is recommended to use only those friends who are not using position or who understand more deeply about Overflow:hidden.

5, parent P-defined Overflow:auto

<style type= "Text/css" >. P1{background: #000080; border:1px solid red;/* Fix Code */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, and when using Overflow:auto, the browser automatically checks the altitude of the floating area

Pros: Simple, less code, good browser support

Disadvantage: Scroll bars appear when the internal width is higher than the parent p.

Recommendation: Not recommended, if you need to scroll bar or make sure your code does not appear scroll bar to use it.

6, parent p also floats together

<style type= "Text/css" >. P1{background: #000080; border:1px solid red;/* Solution Code */width:98%;margin-bottom:10px; Float:left}. P2{background: #800080; border:1px solid red;height:100px;width:98%;/* Fix Code */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 the code floats together, it becomes a whole

Pros: No advantages

Cons: New floating issues are created.

Recommendation: Not recommended, only for understanding.

7, parent P-defined display:table

<style type= "Text/css" >. P1{background: #000080; border:1px solid red;/* Solution Code */width:98%;d isplay: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: Change the P attribute to a table

Pros: No advantages

Cons: New and unknown issues arise.

Recommendation: Not recommended, 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>