正常的块级元素默认会独占一行，我们可以通过浮动的方式来使其脱离文档流，横向排列。但是浮动如果不及时清除，就会影响下一个元素的表现。所以我们要及时地清除浮动。那么如何清除浮动呢？

　　首先说明，我们要的是真真正正的清除，不是撑起父元素，所以像为父元素设置高度，这种做法我不提倡。

　　方法一：

　　如果上一个元素是一个浮动元素，我们可以在其后面放置一个‘clear’元素，即将一个空元素设置成clear：both；这样之前的浮动效果就到此为止了。这样做还有一个好处就是，如果父元素没有设置宽和高，浮动元素不在文档流中，不会将父级元素撑起来。但是clear元素会将它撑起来。

　　方法二：

　　比较高端的方法，利用BFC特性。

　　我们使用overflow：hidden；触发BFC。使父元素强行包裹浮动元素，并隔绝内外环境。外面的元素不会受里面浮动元素影响。

　　方法三：

　　为父元素设置高度，还是因为浮动元素不会撑起父元素，父元素是空的，是扁的。我们手动设置高度为浮动元素占位。

　　方法四：

　　父元素也浮动，我不提倡这种做法。

　　方法五：

　　父级div定义 伪元素:after 和 zoom

　　

1 .div1 { 2     background-color:#0000ff; 3     border:1px solid red; 4 } 5  6 .div2 { 7     background-color:#ff0000; 8     border:1px solid red; 9     height:100px;10     margin-top:10px;11 }12  13 .left {14     float:left;15     width:20%;16     height:200px;17     background-color:#cccccc;18 }19 20 .right {21     float:right;22     width:30%;23     height:80px;24     background-color:#cccccc;25 }26  27 /*清除浮动*/28 .clearfloat:after {29     display:block;30     clear:both;content:"";31     visibility:hidden;32     height:0;33 }34 35 .clearfloat {36     zoom:1;37 }

1 
     
       2     
      
       左左
      
 3     
      
       右右
      
 4 
     
5  6 
     
      第二个div
     

　　

/*伪元素的方法不建议初学者使用*/

 　　方法六：

　　将父元素设置为表格，同样不提倡。