問題概述：
父元素在檔案流中高度默認是被子元素撐開的，當子元素脫離檔案流以后，將無法撐起父元素的高度，也就會導致父元素的高度塌陷
父元素的高度一旦塌陷所有元素的位置將會上移，導致整個頁面的布局混亂
方法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 >
<div ></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原理一樣，但是不用向頁面中添加對于的結構
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/282823.html
標籤：其他
上一篇：解決高度塌陷問題