float浮動，用於橫向佈局。 起初的橫向佈局都用display:inline-block，但是這會導致兩個元素之間有空隙，而這是由代碼換行解析成空格的，解決元素間有空隙，空格：font-size:0;,但影響很大。 float浮動會破壞line-box，即浮動元素脫離文檔流（當給一個元素設置浮動了 ...
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中的任何一個。
