一、為何要清除浮動
作為乙個前端er肯定會要用到float屬性。浮動的框可以左右移動，直到遇到另乙個浮動框或者遇到它外邊緣的包含框。浮動框不屬於文件流中的普通流，當元素浮動之後，不會影響塊級元素的布局，只會影響內聯元素布局。此時文件流中的普通流就會表現得該浮動框不存在一樣的布局模式。當包含框的高度小於浮動框的時候，此時就會出現「高度塌陷」。即為何我們需要清楚浮動。下面的例子即展示何為塌陷。
（1）該圖是最初的樣式，未設定浮動。藍框是寫了乙個.container類作為包含框。包含三張。
（2）其實要看到塌陷效果很簡單。根據我上面所說，可以看到img3的寬高都大於前兩張圖。所以我們假設把img3設為 float：left；那麼此時img3就會脫離原來的文件流。現在我們來看看給img3設左浮動後的效果
噹噹當！可以看到成功脫離了 .container 類，即脫離了文件流。產生塌陷。博主此刻的心情是這樣的：
(這裡也印證前面所說當浮動塊高度大於包含塊寬度會產生塌陷的理論。)
二、如何清除浮動
關於清除浮動網上有很多種方法，這裡博主只給出一種我常用也是目前最主流的方法。即用after偽元素清除浮動。其實關於清除浮動的**主要就是圍繞clear:both和如何隱藏content。文末我會貼出乙個包含多種清除浮動方法的文章，大家可以根據喜好選擇。
（1） 通過加入.clearfix:afer類清除浮動
效果如下：
噹噹當！到這裡我們成功將放回文件流。且不會影響後續塊級元素的布局。
但是**座的博主心裡還不是很滿意。此刻內心如圖：
因為細心的朋友可以發現，其實我們理想的清除浮動後的狀態，應該是這個樣子的：
但是這個問題已經超出了這篇文章討論的範圍，且博主解決這個問題的方法很土，就不貼出自己的**了。以後有更好的方法會再更博。總之，我們 已經成功解決了如何清除浮動及為什麼要清除浮動兩個問題。
三、什麼是bfc及如果利用bfc包含浮動
（1）什麼是bfc
這裡直接po出官方給的解釋：
(2) 如何用bfc清除浮動
粗暴的總結就是讓浮動塊包含在同乙個bfc中加同時（也可以理解為包含塊加屬性overflow:hidden）。
浮動理解及清除浮動
浮動是css裡布局使用最多的屬性。浮動之後，元素會脫離文件流，緊貼上乙個浮動盒子的邊。一旦我們設定了浮動，那麼該元素就能夠併排展示，而且可以設定寬和高。float right float left 浮動元素會緊貼上乙個浮動元素。若寬度不夠，會換行。頂部頂帖上乙個浮動元素的底部。浮動方向是要一直。di...
清除浮動方法及清除浮動原因
div1 盒子裡有left和right 兩個子盒子，div1 有兄弟盒子div2，給left right 盒子新增浮動前效果圖 浮動的屬性雖然方便使用，但是在使用這種屬性時，也存在著一種弊端，那就是當子元素設定了float屬性之後，且父元素的高度沒有設定，而是由子元素支撐起來，則會導致父元素的高度塌...
浮動使用及清除浮動
浮動 讓元素脫離文件流，不受父盒子限制 浮動元素的寬高不會撐大父盒子 在父盒子無高度情況下 浮動元素不會遮蓋文字部分，文字會圍繞浮動元素 浮動目前功能 1.清除之間空白間隙 2.行級元素設寬高。使用場景多是寬高一致的元素整齊排列。清除浮動的方法 1.給浮動元素的父盒子加overflow hidden...