解決高度塌陷

如何解決高度塌陷

在浮動佈局中，當子元素設定為float:時候，父元素就將失去高度，如下：

最完美解決辦法：

在浮動元素（j就是失去高度的元素）後面新增一個偽元素，在css中的寫:選擇器::after{content:''; display:block;clear：both;

點選檢視程式碼

選擇器::after{content:''; display:block;clear：both;}

由於after預設的是行內元素，所以要將其變成塊狀元素。content:’’也一定要寫；

---

如果已經解決了你的問題，稍等：


.如果想要在子元素設定margin-top：10px發現是父元素也將被賦予這個屬性，解決這種情況的方法是：
在子元素中加入偽類元素::before{content:””;}如果“”不寫東西，是不起效果的，但是如果寫了就會溢位，所以在後面加display:”table”;table不佔空間，而且還會起到一定的作用。

出現上述兩種情況可以簡寫為：

點選檢視程式碼

.clearfix::before,
.clearfix::after{
    content:'';
    display: table;
    clear: both;
}

---

解決第一個問題的時候，實際上是通過一些方式開啟BFC（Block formatting context塊級格式化環境）；
方式有：
1.設定元素的浮動；
2.將元素設定為行內塊（不推薦）；
1.將元素設定Overflow:hidden;
這些也可以使其包含元素。