相信作為一名前端工作人員，一定遇到過或是被問過清除浮動這一問題，一般我們會說：元素新增float屬性後，其父元素不會被撐開，解決這個問題的過程就稱為清除浮動。沒有問題，假如再深入問一點，為什麼新增float屬性之後會出現這樣的情況，有幾種清除浮動的方法。
浮動的案例：父元素沒有被撐開
class
="container"
>
class
="photo"
>
div>
class
="name"
>
div>
>
震落了清晨滿披著的露珠，
伐木聲丁丁地飄出幽谷。
放下飽食過稻香的鐮刀，
用揹簍來裝竹籬間肥碩的瓜果。
秋天棲息在農家裡。
向江面的冷霧撒下圓圓的網，
收起青鯿魚似的烏桕葉的影子。
蘆篷上滿載著白霜，
輕輕搖著歸泊的小槳。
秋天遊戲在漁船上。
草野在蟋蟀聲中更寥闊了。
溪水因枯涸見石更清冽了。
牛背上的笛聲何處去了，
那滿流著夏夜的香與熱的笛孔？
秋天夢寐在牧羊女的眼裡。p
一、**float屬性：**元素在新增了float屬性之後，會被自動變成塊級元素，並脫離文件流，可以理解為和普通的塊級元素不在同一層，所以不會撐開父元素。邊框靠攏到父元素的邊框或是其他浮動元素的邊框。
注：position:absolute也會讓元素脫離文件流，不會撐開父元素，不同的是float元素到底呈現在什麼位置是由瀏覽器決定的，而絕對定位元素的位置是需要人為設定的。
解決上述父元素沒有被撐開的問題就稱為清除浮動，最經常用到的辦法就是給元素新增css屬性clear:both。
二、clear究竟是如何工作的？個人認為最合理的解釋就是官網：
規定元素的哪一側不允許其他浮動元素，特別宣告只對前面的元素起作用。
兩個浮動元素的案例：
1.photo元素是浮動的，name元素不是，且都是container元素的子元素。為name元素新增clear:left屬性的效果
可以看到，name元素不允許左側出現浮動元素，那麼name元素就會自動移動到下一行去。
2.按照對clear屬性的理解，不允許哪一側出現浮動元素，我們給photo元素新增乙個clear:both屬性，試一試看看有什麼樣的效果。
發現並沒有起任何作用，name元素依然出現在了photo的右側。這是因為就像之前宣告的：clear只對前面的元素起作用。
三、那麼如何能夠實現下面這種布局呢？（讓float元素撐開父元素）
1.也很簡單，只需要給父元素新增乙個overflow:hidden即可，同時，給name元素新增clear:left屬性
.container
.container .name
2.如果不給父元素新增overflow:hidden屬性，可以採用偽元素的方式來實現同樣的效果：
.container::after
總結：
1.float會讓元素變成塊級並脫離文件流，所以不會撐開父元素，會浮動到父元素的邊框或者其他浮動元素邊框；
2.clear屬性的含義在於不允許該元素的某側出現浮動元素，並且只對前面的元素起作用；
3.給父元素新增overflow:hidden或是利用偽元素可以實現讓浮動元素撐開父元素的效果。
深入理解CSS浮動
float 浮動 浮動元素脫離普通流，然後按照指定方向，向左或者向右移動，碰到父級邊界或者另外乙個浮動元素停止 值 left right none inherit 初始值 none 應用於 所有元素 繼承性 無 浮動流正常流中元素乙個接乙個排列 浮動元素也構成浮動流 塊級框浮動元素自身會生成乙個塊級...
float浮動深入理解
1.float的原本作用 為了實現文字環繞 2.float的包裹性和破壞性 包裹性 收縮 堅挺 隔絕。bfc block formatting context 塊級格式化上下文 破壞性 會讓父元素高度塌陷 浮動的破壞性只是單純的為了實現文字的環繞效果而已 具有包裹性的其他小夥伴 dispaly in...
深入理解浮動定位 float
css網頁布局有兩種方式 一種是浮動式布局 另外一種是定位布局。這兩種方式的核心都脫離於文件流的控制。前提 文件流 document flow 對於乙個xhtml網頁，body元素下的任意元素，根據其前後順序，組成了乙個個上下關係，簡單說這就是文件流。瀏覽器根據這些元素的順序去顯示它們在網頁中的位置...