Clear float float

Turn from: http://www.jb51.net/css/173023.html

1, Parent div defines height (fixed height)

Principle: The parent div manually defines the height, which solves the problem that the parent Div cannot automatically get to the 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

2. Add empty div tag at the end Clear:both

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 bad
Recommendation: Deprecated, but this method is a major use of the previously used to clear the floating method

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 together to let the mainstream browser support.
Recommendation: recommended, we recommend defining public classes to reduce CSS code.

The author inserts a sentence: This method with directly after the float element does not need to float the element directly adds Clear:both The difference is: Uses: After Pseudo-class method, the parent element will be open, for example sets the parent element's background:red, will see the red. But add Clear:both on the element that does not need to float, the parent element above will not be opened, set the parent element's background:red, can only see the red Red coarse color line .

4. Parent DIV definition Overflow:hidden

 <style type= "text/css" > div1{background:#  000080;border:1px Solid Red /*   fix code  */ width:98%;overflow:hidden}. div2{ background:#  800080;border:1px Solid red;height:100px;margin-top:10px;width:98%  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: It is recommended to use only those friends who are not using position or who understand more deeply about Overflow:hidden.

5. Parent DIV Definition Overflow:auto

 <style type= "text/css" > div1{background:#  000080;border:1px Solid Red /*   fix 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.

6, the parent Div also floats together

<style type= "Text/css" >. div1{background:#000080;border:1px solid red;/*Resolving code*/width:98%;margin-bottom:10px;float: left}.div2{background:#800080;border:1px solid red;height:100px;width:98%;/*Resolving 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.

7, Parent div definition display:table

 <style type= "text/css" > div1{background:#  000080;border:1px Solid Red /*   fix 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
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" > . 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%</style> <div class= "Div1" > <div class= "left" >Left</div> <div class= "right" >Right</div> <br class= " Clearfloat "/> </div> <div class=" Div2 ">

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.

Clear float float