清除浮动的方法

当一个元素添加了浮动属性时，它就脱离了文档流。
这相当于它已经飘起来而不再被包在父元素里。
所以这时子元素的并不会把父元素的尺寸撑开，
而我们为了更好的构造页面布局，所以需要清除浮动带来的影响。

其实，清除浮动的方法有近10种，但这里只推荐其中几种。

• 父元素结尾处加空div标签，同时添加clear:both

  这个空div不受浮动影响，出现在本该出现的位置，负责撑开父元素。

  代码少，兼容性强，
  但添加了无意义的元素，且复用性差，在需要大量清除的时候不太实用。
  

• 父元素添加属性overflow：auto/hidden

  一定情况下会影响外观，因为当子元素超出父元素大小的时候，会被隐藏或者父元素出现滚动条，这肯定不是我们想要的。
  特别时在父元素设置了高度或者实用position属性的时候。
  
  

• 父元素添加伪类：after 和 zoom

  用伪类：after在元素尾部添加内容并clear浮动（类似上面方法）
  而zoom的用法时为了兼容 IE6/7 ，因为它们不支持伪类。

  .clear { content: '';  display: block;  clear: both; }
  .clearIE { zoom: 1; } //把尺寸设置为一倍大小。这是IE专有属性。
  

  这是一种比较流行的办法，除了兼容性，也没有大问题。
  但是这种方法需要的代码比较多，所以建议单独使用一个类，方便复用。
  
  
  Wait me back