## 2.4 浮動和清除浮動 ### 1.什么是浮動 我們可以用一句話描述浮動的元素的特點：**浮動元素會脫離文檔流并向左/向右浮動，直到碰到父元素或者另一個浮動元素。** ```css div{float：left/right}; ``` **浮動會脫離文檔流** 脫離文檔，也就是說浮動不會影響普通元素的布局。我們可以直接理解成，浮動的元素在普通文檔流的上面一層，更靠近屏幕的上層。  * 默認三個設置了寬高的`block`元素，本來會格子獨占一行； * 如果框1設置了`float:right`，他會忽略框2和框3，直到碰到父元素； * 如果，框1設置成`float:left`，就會覆蓋住處在普通文檔流中的框2。\(框1浮動后，框1原本在普通文檔流中的位置被框2頂替，而框1向左浮動后，由于處在普通文檔流的上層，就會蓋住框2\)。 **浮動可以內聯排列**  * 浮動會向左/向右浮動，直到碰到另一個浮動元素為止，這樣可以使區塊元素在一行顯示。 * 當三個區塊都浮動，而一行的空間不夠了，會引起元素換行。 * 但是如果每個元素的高度不一致，**會出現“卡住”的情況**。 然而，浮動也會導致一些我們不希望看見的事情發生。 **浮動會導致父元素高度坍塌** 浮動會脫離文檔流，這個問題對整個頁面布局有很大的影響。 ```html .box-wrapper { border: 5px solid red; } .box-wrapper .box { float: left; width: 100px; height: 100px; margin: 20px; background-color: green; } <div class="box-wrapper"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> ``` 結果如下，浮動元素脫離了文檔流，并不占據文檔流的位置，自然父元素也就不能被撐開，所以沒了高度。  很明顯，這樣的效果并不符合我們的預期，所以我們需要想辦法解決這個問題。現在，我們需要清除浮動！ ### 2.如何清除浮動 **清除浮動** 清除浮動的底層原理是在被清除浮動的元素上邊或者下邊添加足夠的清除空間。 要注意了，**我們是通過在別的元素上清除浮動來實現撐開高度的， 而不是在浮動元素上。** 還是接著上面的例子，我們簡單修改一下HTML代碼： ```html <div class="box-wrapper"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div style="clear:both;"></div> </div> ```  哈哈，好像問題解決了！但是要注意的是，我們是在原來的頁面中添加了一個空的div元素，并且增加樣式`clear:both`，不可以在已經浮動的元素中增加清除浮動的樣式，這樣只會讓其不去進行位置浮動，但是仍然是脫離文檔流的，依然不能撐開高度。如下圖：  **清除浮動的最佳實踐** ```css .clearfix:after {content:""; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; } ``` 1\)`display:block`使生成的元素以塊級元素顯示,占滿剩余空間。 2\) `height:0` 避免生成內容破壞原有布局的高度。 3\) `visibility:hidden` 使生成的內容不可見，并允許可能被生成內容蓋住的內容可以進行點擊和交互。 4）通過`content:"."`生成內容作為最后一個元素，至于content里面是點還是其他都是可以的。 5）`zoom：1`觸發IE hasLayout。 通過分析發現，除了`clear：both`用來閉合浮動的，其他代碼無非都是為了隱藏掉content生成的內容。 **觸發BFC** BFC全稱是塊狀格式化上下文，它是按照塊級盒子布局的。我們了解他的特征、觸發方式、常見使用場景這些就夠了。 **BFC的主要特征** ? BFC容器是一個隔離的容器，和其他元素互不干擾；所以我們可以用觸發兩個元素的BFC來解決垂直邊距折疊問題。 ? **BFC可以包含浮動**；通常用來解決浮動父元素高度坍塌的問題。 其中，BFC清除浮動就是用的“包含浮動”這條特性。 那么，怎樣才能觸發BFC呢？ **BFC的觸發方式** 我們可以給父元素添加以下屬性來觸發BFC： ? `float` 為 `left` \| `right` ? `overflow` 為 `hidden` \| `auto` \| `scorll` ? `display` 為 `table-cell` \| `table-caption` \| `inline-block` \| `flex` \| `inline-flex` ? `position` 為 `absolute` \| `fixed` 所以我們可以給父元素設置`overflow:auto`來簡單的實現BFC清除浮動，但是為了兼容IE最好用`overflow:hidden`。但是這樣元素陰影或下拉菜單會被截斷，比較局限。所以以上的BFC觸發方法都可以用來解決浮動問題，但是要選擇合適的使用場景。 ### 3.總結 有很多方法可以進行清除浮動這樣的操作，歸根到底，從原理上講其實分為兩種。 其一，通過在浮動元素的末尾添加一個空元素，設置 clear：both屬性。（after偽元素其實也是通過 content 在元素的后面生成了內容為一個點的塊級元素）； 其二，使父元素觸發BFC。（通過設置父元素 overflow 或者display：table 屬性來閉合浮動）