1. 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 non-IE browsers only support: after, principle and method 2 are a little similar, zoom(IE has attributes) can solve ie6,ie7 floating problem

Advantages: good browser support, not easy to have strange problems (at present: large websites are used, such as Tengxun, Netease, Sina, etc.)

Disadvantage: There are many codes, many beginners do not understand the principle, it is necessary to use two codes in combination to enable mainstream browsers to support.

Recommendation: Recommended use, recommended definition of common classes to reduce CSS code.

2. Empty the div tag at the end: clear:

<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: Adding an empty div, clearing the float by using css-enhanced clear: body, so that the parent div can automatically get the height

Advantages: Simple, less code, good browser support, no strange problems

Disadvantage: Many beginners do not understand the principle; if the page floating layout is more, we need to add a lot of empty div s, which makes people feel very bad.

Suggestion: It is not recommended, but this method is one of the main methods used in the past to remove floating.

3. The parent div defines 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. When overflow:hidden is used, the browser automatically checks the height of the floating area.

Advantages: Simple, less code, good browser support

Disadvantage: Can not be used with position, because the size of the excess will be hidden.

Suggestion: Only friends who don't use position or have a deep understanding of overflow:hidden are recommended.