在頁面布局中經常會用到浮動和清除浮動的操作，但之前是知其然而不知其所以然，看過多篇文章後，有了一些深入的了解，特整理下來！
最初設計浮動的目的是為了實現文字等內容可圍繞影象顯示，後來發現浮動方便布局，所以支援浮動任何元素，元素設定浮動後，會脫離原先文件的普通流中，讓原先各自佔據一行的塊元素在一行顯示，**展示如下：
如果只設定a塊floagt:left:結果如下：
a塊脫離了原先的文件普通流，不再佔據原先的位置，所以b移移動到原先a的位置，因為a是浮動的，所以會遮擋住b，因為父元素沒有設定高度，所以父元素的高度由子元素決定，現在為b的高度，a浮動後，超出了父元素的高度。
現在把b塊也設定floagt:left，就實現了2個塊狀元素在一行顯示：
現在看到雖然實現了2個塊狀元素在一行顯示，但是父元素的高度現在為0，會影響到兄弟元素的排版，所以我們現在要解決這個問題，就用到了清除浮動的操作
清除浮動後正常的顯示如下圖：
1、在父元素高度固定的情況下，可以直接設定父元素的高度height: 200px即可正常顯示
2、增加塊元素，用clear:both清除
用這種方法清除浮動，會為文件中增加不必要的結構，不推薦。
3、 給父元素設定overflow清除浮動
為什麼overflow會實現這種效果呢？是因為它是乙個塊級格式化上下文 (block fromatting context)，w3c對bfc的定義如下：
浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為「visiable」的塊級盒子，都會為他們的內容建立新的bfc（塊級格式上下文）。
bcf可以包含浮動元素，所以能實現撐起高度的效果。
4、使用after偽類
以上是常用的幾種方法，可以根據場景的不同選擇適合的。
css清除浮動四種方法
清除浮動的本質是清除浮動元素脫離標準流造成的影響。為什麼要清楚浮動？父級沒高度 子盒子浮動了 影響下面布局，我們就應該清除浮動了。清除浮動的四種方法 1.額外標籤法。在最後乙個浮動標籤之後新增乙個額外的塊級標籤，比如空div標籤，設定樣式 2.給浮動標籤的父級元素新增overflow屬性，屬性值設定...
CSS清除浮動的四種方法
浮動能實現網頁排版布局，但是同樣也會給網頁帶來一定的問題 父盒子高度塌陷 下面我們就整理一下幾種清楚浮動的方法 缺點 使用不靈活，後期不易維護 例 child 在浮動元素的後面加乙個空的塊級元素 通常是div 設定該元素clear both 屬性。缺點 結構冗餘 例 child 延續內牆法，利用偽元...
浮動的清除 四種方法
原文 前言 乙個父親不能被自己浮動的兒子，撐出高度。我們本以為這些li，會分為兩排，但是，第二組中的第1個li，去貼靠第一組中的最後乙個li了。第二個div中的li，去貼第乙個div中最後乙個li的邊了。原因就是因為div沒有高度，不能給自己浮動的孩子們，乙個容器。只要浮動在乙個有高度的盒子中,那麼...