解決高度塌陷問題

進擊的小碼農發表於2021-05-04

問題概述：

父元素在文件流中高度預設是被子元素撐開的，當子元素脫離文件流以後，將無法撐起父元素的高度，也就會導致父元素的高度塌陷

父元素的高度一旦塌陷所有元素的位置將會上移，導致整個頁面的佈局混亂

方法1 開啟父元素的BFC或hasLayout

1.1 BFC

1.1.1 Block Formatting Context-塊級格式化環境

1.1.2 BFC是元素的隱含屬性，預設是在關閉狀態的

1.1.3 可以通過一些特殊的樣式，來開啟BFC

1.1.4 開啟BFC以後元素將會具有如下特性

1.1.4.1 父元素的垂直外邊距不會與子元素重疊

1.1.4.2 開啟BFC的元素不會被浮動元素所覆蓋

1.1.4.3 開啟BFC的元素可以包含浮動子元素

1.1.5 開啟BFC的方式

1.1.5.1設定元素浮動

1.1.5.2設定元素絕對定位

1.1.5.3設定元素的型別為inline-block

1.1.5.4設定overflow為一個非預設值，一般都是使用overflow:hidden來開啟BFC

1.2 hasLayout

1.2.1 在IE6中沒有BFC，但是有一個和BFC類似的hasLayout

1.2.2 在IE6中可以通過開啟hasLayout來解決高度塌陷的問題

1.2.3 副作用最小的開啟方式為設定-zoom:1，當為元素設定寬度非預設值時，會自動開啟hasLayout

.clearfix{
    zoom:1;
}

方法2 新增一個空白的div

2.1 在塌陷的父元素的最後新增一個空白的div，然後對該div進行清除浮動

<div class="box1">
    <div class="box2"></div>

    <div style="clear:both"></div>
</div>

2.2 使用這種方式會在頁面中新增多餘的結構

方法3 使用after偽類（推薦）

3.1 使用after偽類，向父元素後新增一個塊元素，並對其清除浮動

.clearfix:after{
    content:"";
    display:block;
    clear:both;
}

.clearfix{
    zoom:1;
}

3.2 該種方式的原理和方法2原理一樣，但是不用向頁面中新增對於的結構

相關文章