float浮动-清浮动BFC渲染机制

float浮动，用于横向布局。

起初的横向布局都用display:inline-block，但是这会导致两个元素之间有空隙，而这是由代码换行解析成空格的，解决元素间有空隙，空格：font-size:0;,但影响很大。

 

float浮动会破坏line-box，即浮动元素脱离文档流（当给一个元素设置浮动了之后，它不会再占用页面当中的“位置”了），造成的影响：不会撑开父级的高度。如下图：

想要解决这个影响，就得清浮动（清除浮动所造成的影响）了。

清浮动后，如下：

清浮动的方法：

1.给浮动元素的父级加高度

　　拓展性不好

　　在不能确定父级高度的情况下不能使用

 

2.clear:both(用得最多的方法)

　　*zoom:1 用来触发 hasLayout(IE浏览器的BFC)

.clear{
     *zoom: 1;/*兼容IE6,7*/
}
.clear:after{
      content: '';
      display: block;
      clear: both;
}

 

3.BFC(是一套渲染机制)

　　触发一个元素的BFC（Block Formatting Contexts，即块级格式化上下文）

　　相当于在这个元素里面建立起一堵围墙

　　围墙里面的内容和围墙外面的内容不会产生干扰，如：

overflow: hidden;

 

想要触发BFC的方式（满足任一条件即可）：

（1）float的值不为none；

    （2）overflow的值不为visible；

    （3）display的值为inline-block, table-cell, table-caption, flex, inline-flex之一；

    （4）position的值不为static或则releative中的任何一个。