## 一、什么是高度塌陷 在文檔流中，若父元素未設置高度，那么父元素的高度默認是被子元素撐開的，即子元素多高，父元素就有多高。但是當子元素設置浮動之后，子元素就會完全脫離文檔流，父元素還在文檔流中，此時父元素的高度就沒有子元素撐起（子元素無法撐起父元素的高度），從而導致父元素的高度塌陷。簡單來說，就是包含含有浮動的元素的上一級元素的高度變為0了，下面的元素會上去，這樣會導致頁面布局混亂。 ``` <div class="parent"> <div class="child"></div> <div class="child"></div> </div> .parent { width: 300px; border: 5px solid #f00; } .child { float: left; width:100px; height: 100px; border: 5px solid #00f; } ``` ## 二、解決方法 #### 1、父元素結束之前添加一個標簽 `<div style="clear:both;"></div>` ``` <div class="parent"> <div class="child"></div> <div class="child"></div> <div style="clear:both;"></div> </div> <div class="bottom"></div> .parent { border: 5px solid #f00; } .child { float: left; width: 100px; height: 200px; border: 5px solid #00f; } .bottom { width: 200px; height: 100px; background: #0f0; } ``` 缺點：增加了無意義的標簽 #### 2、讓父元素本身也浮動 float：left; ``` <div class="parent"> <div class="child"></div> <div class="child"></div> </div> <div class="bottom"></div> .parent { float: left; border: 5px solid #f00; } .child { float: left; width: 100px; height: 100px; border: 5px solid #00f; } .bottom { width: 200px; height: 100px; background: #0f0; } ``` 缺點：雖然可以撐開父元素，但是會導致父元素的寬度丟失，而且會導致下邊的元素上移,使得跟父元素相鄰的元素的布局受到影響 #### 3、給父元素一個固定高度，此方法適用于子元素高度已知并且固定的情況 ``` <div class="parent"> <div class="child"></div> <div class="child"></div> </div> <div class="bottom"></div> .parent { height: 100px; border: 5px solid #f00; } .child { float: left; width: 100px; height: 100px; border: 5px solid #00f; } .bottom { width: 200px; height: 100px; background: #0f0; } ``` 缺點：父元素與子元素的邊框會重疊，無法自適應子元素的高度 #### 4、給父元素設置display: inline-block; ``` <div class="parent"> <div class="child"></div> <div class="child"></div> </div> <div class="bottom"></div> .parent { display: inline-block; border: 5px solid #f00; } .child { float: left; width: 100px; height: 100px; border: 5px solid #00f; } .bottom { width: 200px; height: 100px; background: #0f0; } ``` 缺點：會導致父元素的寬度丟失，與相鄰元素會產生額外的間距 #### 5、給父元素設置 overflow : hidden; ``` <div class="parent"> <div class="child"></div> <div class="child"></div> </div> <div class="bottom"></div> .parent { overflow: hidden; border: 5px solid #f00; } .child { float: left; width: 100px; height: 100px; border: 5px solid #00f; } .bottom { width: 200px; height: 100px; background: #0f0; } ``` 缺點：要是子元素要margin負值定位或是負的position定位，溢出部分會被裁掉，如二級菜單的影響 #### 6、通過after偽類，after + zoom方法（推薦） ``` <div class="parent clearAll"> <div class="child"></div> <div class="child"></div> </div> <div class="bottom"></div> .parent { border: 5px solid #f00; } .child { float: left; width: 100px; height: 100px; border: 5px solid #00f; } .bottom { width: 200px; height: 100px; background: #0f0; } .clearAll:after { content: ''; display: block; height: 0; clear: both; visibility: hidden; } .clearAll { zoom : 1; } ``` 利用偽類來清除浮動，其效果跟創建一個空的div并設置其為 clear：both 是一樣的，只不過這里用偽類代替了空的div元素，不會影響任何其他樣式，通用性強，覆蓋面廣。