浮動會導致父元素塌陷如圖：

解決辦法：

父元素overflow：hidden，如圖

末尾插入子元素clear，如圖

為甚么，父元素overflow：hidden會解決塌陷問題？

來自知乎貘吃饃香的回答

overflow:hidden 的意思是超出的部分要裁切隱藏掉

那么如果 float 的元素不占普通流位置 普通流的包含塊要根據內容高度裁切隱藏

如果高度是默認值auto 那么不計算其內浮動元素高度就裁切

就有可能會裁掉float 這是反布局常識的。

-----------------------------分割線-------------------------------------

如果了解BFC這個問題也就迎刃而解了，看看BFC怎么說的。

BFC布局規范中，計算BFC的高度時，浮動元素也參與計算

overflow：hidden會創建BFC。

為甚么，末尾插入子元素clear會解決塌陷問題？

看一下什么是清楚浮動這問題也可以迎刃而解

來自官方文檔：

如果聲明為左邊或右邊清除，會使元素的上外邊框邊界剛好在該邊上浮動元素的下外邊距邊界之下。

ok，好的基礎才會走的更遠。

以上這篇清除浮動(float)的影響介紹就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。

原文地址：http://www.cnblogs.com/c-o-d-e/archive/2016/06/06/5565109.html