float浮動-清浮動BFC渲染機制

摘要： 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中的任何一個。