页面布局——float之清除浮动

长期以来，很多人都以为清浮动的含义就是清除浮动，实际上清浮动是指清除浮动造成的影响，即给子元素使用float 会造成父级元素高度塌陷，为此需要清浮动。

浮动破坏了 line-box 才会浮动；

本质：

清除浮动的影响，解决父级元素塌陷；

解决方法：

1. 给父级元素设置高度（局限性：在子元素高度不固定的情况下无法解决，扩展性不好）；
2. clear:both;

.clear{
*zoom:1;//缩放，为了兼容IE6，7
}
.clear:after{
    content: "";
    display: block;
    clear: both;
}

3.BFC；即块级格式化上下文 (Block Fromatting Context)；W3C指出浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。所以要实现BFC，可以通过这几个方法

1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible