目錄

• CSS-高度塌陷問題
  • 表現
  • 產生的原因
  • 高度塌陷的解決辦法：
  • BFC相關

CSS-高度塌陷問題

表現

例如：

HTML：

<div class="first">
    <div class="first-child1">first-child1</div>
    <div class="first-child2">first-child2</div>
</div>
<div class="second">
    second
</div>
<div class="third">
    third
</div>
 

CSS：

.first{
    width: 300px;
    background-color: pink;
}
.first .first-child1,.first .first-child2{
    float: left;
    width: 100px;
    height: 100px;
}
.first .first-child1{
    background-color: purple;
    margin-right: 10px;
}
.first .first-child2{
    background-color: red;  
}
.second{
    width: 200px;
    height: 150px;
    background-color: blue;
}
.third{
    width: 100px;
    height: 150px;
    background-color: green;
}
 

表現為：

產生的原因

由上面的例子可以看出，first盒子沒有設定高度，由子元素撐開，但是由於子盒子設定了浮動，脫離了標準流，所以導致first盒子沒有高度，表現為second和third盒子向上移動了。

可以得出產生高度塌陷的原因：

在文件流中，父元素的高度預設是被子元素撐開的，也就是子元素多高，父元素就多高。但是當為子元素設定浮動以後，子元素會完全脫離文件流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。由於父元素的高度塌陷了，則父元素下的所有元素都會向上移動，這樣將會導致頁面佈局混亂。

高度塌陷的解決辦法：

1. 給父元素設定固定高度。但是使用這種方式後，父元素的高度就不能根據子元素自動撐高了，可以根據自己頁面的特點，如果可以固定高度，可以使用這種方式，否則，不推薦這種方式。

2. 額外標籤法，這是w3c推薦的解決方案，但是不推薦，因為html的原則是寫出語義化的標籤，這種方式會額外增加無意義的標籤。

   <div class="first">
       <div class="first-child1">first-child1</div>
       <div class="first-child2">first-child2</div>
       <div style="clear: both;"></div>
   </div>

3. 父元素的overflow屬性（開啟元素的BFC）：

   .clearfix{
       overflow: hidden;
   }

   使用這種方式，屬性值可以是非visible（hidden/auto/scroll）中任意，但是建議用hidden。

   這種方式副作用較小，這種方式在ie6中不支援，可以外加zoom: 1;

   .clearfix{
       overflow: hidden;
       zoom: 1;/*針對ie6*/
   }

4. 單偽元素after清除浮動（開啟元素的BFC）：

   .clearfix::after{
       content: "";/*偽元素內容為空*/
       display: block;/*非預設的就行，也可以是table等等*/
       height: 0;/*偽元素高度為0，不影響其他元素*/
       clear: both;/*清除浮動*/
       visibility: hidden;/*不可見*/
   }
   .clearfix{
       zoom: 1;/*ie6元素沒有BFC模式，但是這句程式碼會開啟ie6中的hasLayout模式，只在ie中支援*/
   }

   這種方式現在使用比較廣泛，很多大網站都是使用這種方式，副作用較小，只需要在配合處理ie6就可以了。

5. 雙偽元素清除浮動（開啟元素的BFC）：

.clearfix::before,.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
.clearfix{
    zoom: 1;/*ie6元素沒有BFC模式，但是這句程式碼會開啟ie6中的hasLayout模式，只在ie中支援*/
}

這種做法寫法比較麻煩，也不推薦。

清除浮動對父元素的影響後的效果：

BFC相關

根據W3C的標準，在頁面中元素都一個隱含的屬性叫做Block Formatting Context，簡稱BFC，該屬性可以設定開啟或者關閉，預設是關閉的。

當開啟元素的BFC以後，元素將會具有如下的特性：

1. 父元素的垂直外邊距不會和子元素重疊
   
2. 開啟BFC的元素不會被浮動元素所覆蓋
3. 開啟BFC的元素可以包含浮動的子元素