清除浮動的幾種方法

標準流：盒子會各占整行位置。子盒子若是標準流，父盒子雖然沒有高度，但是會撐開父盒子高度。??

浮動：盒子浮了起來，不會占據原來的位置，若父盒子沒有定義高度，則不會撐開父盒子，父盒 子高度為0。（浮動可以讓多個塊級元素在一行顯示，且塊與塊之間沒有空隙，但要注意給父盒子清除浮動，否則父盒子不會被撐開）。

為什么要清除浮動呢？清除浮動的本質是什么？

　　清除浮動主要是為了解決父級元素因為子級浮動引起的內部高度為0的問題。

清除浮動的方法：

1. 額外標簽法：給誰清除浮動，就在其后額外添加一個空白標簽 。
優點：通俗易懂，書寫方便。（不推薦使用）
缺點：添加許多無意義的標簽，結構化比較差。

給元素small清除浮動（在small后添加一個空白標簽clear(類名可以隨意），設置clear:both;即可）

2. 父級添加overflow方法：可以通過觸發BFC的方式，實現清楚浮動效果。
優點：代碼簡潔（慎重使用，若該父盒子里還有position定位會引起麻煩）
缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。

注意：別加錯位置，是給父親加（并不是所有的浮動都需要清除，誰影響布局，才清除誰。）

3. 使用after偽元素清除浮動：：after方式為空元素的升級版，好處是不用單獨加標簽了。（較常用）
優點：符合閉合浮動思想，結構語義化正確
缺點：由于IE6-7不支持：after，使用zoom：1，觸發hasLayout。

注意：這個也是給父親添加 clearfix

4. 使用before和after雙偽元素清除浮動：（較常用）

注意：是給父親添加clearfix

本面試題為前端常考面試題，后續有機會繼續完善。我是歌謠，一個沉迷于故事的講述者。

歡迎一起私信交流。

“睡服“面試官系列之各系列目錄匯總（建議學習收藏）?

總結

以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题之第五十五篇之清除浮动的方法（建议收藏）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。