float浮动，用于横向布局。
起初的横向布局都用display:inline-block，但是这会导致两个元素之间有空隙，而这是由代码换行解析成空格的，解决元素间有空隙，空格：font-size:0;,但影响很大。
float浮动会破坏line-box，即浮动元素脱离文档流（当给一个元素设置浮动了之后，它不会再占用页面当中的“位置”了），造成的影响：不会撑开父级的高度。如下图：
想要解决这个影响，就得清浮动（清除浮动所造成的影响）了。
清浮动后，如下：
清浮动的方法：
1.给浮动元素的父级加高度
拓展性不好
在不能确定父级高度的情况下不能使用
2.clear:both(用得最多的方法)
*zoom:1 用来触发 hasLayout(IE浏览器的BFC)
.clear{
*zoom:;/*兼容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中的任何一个。