浮動會導致父元素塌陷如圖：
解決辦法：
父元素owww.cppcns.com如圖
末尾插入子元素clear，如圖
為甚麼，父元素overflow：hidden會解決塌陷問題？
來自知乎貘吃饃香的回答
overflow:hidden 的意思是超出的部分要裁切隱藏掉
那麼如果 float 的元素不佔普通流位置 普通流的包含塊要根據內容高度裁切隱藏
如果高度是預設值auto 那麼不計算其內浮動元素高度就裁切
就有可能會裁掉float 這是反布局常識的。
----------------www.cppcns.com-------------分割線-------------------------------------
如果了解bfc這個問題也就迎刃而解了，看看bfc怎麼說的。
bfc布局規範中，計算bfc的高度時，浮動元素也參與計算
overflow：hidden會建立bfc。
為甚麼，末尾插入子元素clear會解決塌陷問題？
看一下什麼是清楚浮動這問題也可以迎刃而解
來自官方文件：
如果宣告為左邊或右邊清除，會使元素的上外邊框邊界剛好在該邊上浮動元素的下外邊距邊界之下。
ok，好的基礎才會走的更遠。
原文位址：hzfijpjmttp:
本文標題: 清除浮動(float)的影響介紹
本文位址:
float清除浮動
影響 浮動會使元素具有塊級元素和行內元素的特點 即內聯塊的特點 讓塊元素在同一行顯示。內聯塊 inline block 和浮動 float left right none 元素脫離文件流，按照浮動方向移動，遇到父級邊界或者相鄰浮動元素停住 但是無論哪種方式都需要做一些處理 去除inline bloc...
float清除浮動
在非ie瀏覽器下，當容器的高度為auto，且容器的內容中有浮動 float為left或right 的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢位到容器外面而影響 甚至破壞 布局的現象。即父級物件盒子無法被撐開，這個現象叫浮動溢位，為了防止這個現象的出現而進行的css處理，...
float清除浮動
float是css中布局非常常用的屬性，通過設定浮動能夠實現一些常見的布局，但是剛接觸float屬性的人很有可能會遇到一些問題。1.float，可以讓元素能夠朝著乙個方向進行浮動，常用float right和float left 總結float是css布局中非常常用的屬性，使用float會產生不對塊...