浮动元素父元素高度自适应（高度塌陷）

浮动元素父元素高度自适应（高度塌陷）

当子元素有浮动并且父元素没有高度的情况下父元素会出现高度塌陷

高度塌陷的解决方法

hack1：给父元素添加声明overflow:hidden;(触发一个BFC) （缺点：超出元素会被隐藏）

hack2:在浮动元素下方添加空div,并给该元素添加声明：div{clear:both; height:0; overflow:hidden;}

      （缺点：造成代码冗余）

hack3:万能清除浮动法

选择符:after{content:"";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

<div class="box clearfix">

    <div class="box1>  </div>

    <div class="box2>  </div>

    <div class="box3>  </div>

</div>