消除浮动 clear float

为什么要清除浮动

如果父级元素未设置高度，子元素不浮动父元素高度是自动撑开的。但是当子元素浮动时，因为**浮动元素脱离文档流！**无法撑开父元素，并且浮动元素设置的magin值不能正确显示

   <div class="wrapper">
      <div class="div1">1</div>
      <div class="div2">2</div>
      <div class="div3">3</div>
    </div>

消除浮动的方法

(按照个人使用习惯介绍）

父元素添加伪元素 :after

 .wrapper:after{
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

父元素添加float

 .wrapper{
    border: 1px dashed red;
    padding: 20px;
    float: left;
  }

父元素 overflow:auto/hidden;

auto 和 hidden 可以达到同样的效果，区别是SEO优化。
BTW，添加zoom：1;处理兼容问题

最后添加一个空元素

	<div style="clear:both;"></div>

– End