Summary of methods for clearing floats in CSS

1. 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: Parent div defines height manually, which resolves the problem that the parent Div cannot automatically get to heights
• Advantages: Simple, less code, easy to master
• Cons: only suitable for highly fixed layout, to give precise height, if the height and the parent div is not the same, the problem arises
• Recommendation: Not recommended, only recommended for highly fixed layouts when used
• Average review score: ★★☆☆☆

2. Add 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 CSS to improve the clear:both clear floating, so that the parent div 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 Div, people feel very uncomfortable
• Recommendation: Deprecated, but this method is a major use of the previously used to clear the floating method
• Average review score: ★★★☆☆

3. Parent div Definition Pseudo-class: 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 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 combination, in order to let the mainstream browser support
• Recommendation: Recommended, define public classes to reduce CSS code
• Average review score: ★★★★☆

4. Parent DIV definition 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: 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: Only recommended for friends who do not use position or have a deep understanding of Overflow:hidden
• Average review score: ★★★☆☆

5. Parent DIV Definition 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: 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 Div.
• Recommendation: Not recommended, if you need to scroll bar or make sure your code does not appear scroll bar to use it.
• Average review score: ★★☆☆☆

6, parent Div also floating 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 the code floats together, it becomes a whole
• Pros: No advantages
• Cons: New floating issues are created.
• Recommendation: Not recommended, only for understanding.
• Average review score: ★☆☆☆☆

7. Parent DIV Definition Display:table

<style type= "Text/css" >    . Div1{background: #000080; border:1px solid red;/* Solution Code */width:98%;d isplay: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: Turning div attributes into tables
• Pros: No advantages
• Disadvantages: New and unknown problems arise
• Recommendation: Not recommended, only for understanding
• Average review score: ★☆☆☆☆

8. Add 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: Parent div definition zoom:1 to solve IE floating problem, add BR tag at the end Clear:both
• Recommendation: Not recommended, only for understanding
• Average review score: ★☆☆☆☆

Summary of methods for clearing floats in CSS