浮動元素后面加空div：空div會造成HTML代碼冗余 設置父元素的高度：固定高度會降低元素可擴展 父級添加overflow屬性：有下拉列表框場景不能用 父級添加偽類after：沒有副作用，推薦使用 { 清除浮動 } ...

如果父元素只包含浮動元素，且父元素未設置高度和寬度的時候。那么它的高度就會塌縮為零，也就是所謂的“高度塌陷”，如果父級元素包含背景或者邊框，那么溢出的元素就不像父級元素的一部分了。解決“高度塌陷”的問題很簡單： 1.浮動父級元素 如果讓父級元素浮動，父級元素的高度就會擴大，直到完全包含它里面 ...

在文檔流中，若父元素未設置高度，那么父元素的高度默認是被子元素撐開的，即子元素多高，父元素就有多高。但是當子元素設置浮動之后，子元素就會完全脫離文檔流，父元素還在文檔流中，此時父元素的高度就沒有子元素撐起，從而導致父元素的高度塌陷。簡單來說，就是包含含有浮動的元素的上一級的高度變為0了，下面的元素 ...

我們在進行頁面布局的時候可以發現元素在脫離文檔流后，就會出現高度塌陷問題。 眾所周知高度塌陷的原因是因為子元素脫離文檔流所造成的父元素塌陷（所謂的高度塌陷就是子元素和父元素不在一個層級，未設置高寬的父元素里面沒有子元素的支撐就會塌陷）會影響頁面布局和美觀性。 以下提出幾點解決方案 首先我們先 ...

很多時候子元素的浮動，會造成父元素高度塌陷 解決方法： 1.給父元素末尾添加一個空元素，並設置成清除浮動，即： <div style="clear:both;"></div> 優點：通俗易懂，易於掌握 缺點：添加了無意義標簽，不易於后期維護，違背了結構和表現分離 ...

：inline 后，A的寬高將不起作用，寬高由內容撐開，即被字母A撐開。此時父級元素高度沒有塌陷到和A一樣，而 ...

淺談 清除浮動 的多種方式（clearfix） 1.什么是浮動 ? 是否脫離文檔流? 1、普通流定位 static（默認方式） 普通流定位，又稱為文檔流定位，是頁面元素的默認定位方式 頁面中的塊級元素：按照從上到下的方式逐個排列 頁面中的行內元素：按照從左到右的方式逐個排列 但是如何讓多個 ...

===============解決外邊距塌陷的幾種方法====================== 方法1： 方法2： ...