高度塌陷問題及解決方法
阿新 • • 發佈：2021-07-05
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ border: 10px solid red; /* 在頁面中，元素都有一個隱含屬性叫Block Formatting Contant 簡稱BFC，該屬性可以設定開啟或關閉，預設關閉 當開啟元素的BFC以後，元素將會有如下特性 1 父元素的垂直外邊距不會和子元素重疊 2 開啟BFC的元素不會被浮動元素覆蓋 3 開啟BFC的父元素可以包含浮動的子元素 如何開啟BFC 1 設定元素浮動 使用這種方式開啟，可以撐開父元素，但會導致父元素寬度丟失 而且使用這種方式也會導致下方元素上移，不能解決問題 2 設定元素絕對定位 效果同浮動 3 設定元素為inline-block 可以解決塌陷問題，但會導致寬度丟失，不推薦使用 4 將元素的overflow設定為一個非visible的值 推薦方式：將overflow設定為hidden（或auto）是副作用作用最小的開啟BFC的方式*/ overflow: auto; /* 在IE6及以下的瀏覽器並不支援BFC，所以使用這種方式不能相容IE6 IE6中具有另一個隱藏屬性叫做hasLayout 該屬性作用和BFC類似，通過hasLayout解決問題 直接將元素的zoom設定為1即可 */ /*zoom表放大含義，跟一個數值，元素放大幾倍並且這個樣式只在IE中支援 zoom：1；表示不放大元素，通過該方式開啟hasLayout */ zoom: 1; /* 為相容所有瀏覽器，以上兩種都寫 */ } .box2{ width: 100px; height: 100px; background-color: #BBFFAA; /* 文件流中，父元素的高度預設被子元素撐開 子元素多高，父元素多高 當為子元素設定浮動後，子元素完全脫離文件流 此時導致子元素無法撐起父元素的高度，導致父元素塌陷 由於父元素高度塌陷，則父元素下所有元素向上移動，導致頁面佈局混亂 重點： 解決高度塌陷問題 1 可以將父元素的高度寫死，避免塌陷的問題出現，但一旦寫死，父元素 高度將不能自動適應子元素的高度，這種方案並不推薦 2 */ float: left; } .box3{ height: 100px; background-color: yellow; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> <div class="box3"></div> </body> </html>
當開啟元素的BFC以後，元素將會有如下特性
1 父元素的垂直外邊距不會和子元素重疊
2 開啟BFC的元素不會被浮動元素覆蓋
3 開啟BFC的父元素可以包含浮動的子元素
如何開啟BFC
1 設定元素浮動
使用這種方式開啟，可以撐開父元素，但會導致父元素寬度丟失
而且使用這種方式也會導致下方元素上移，不能解決問題
2 設定元素絕對定位
效果同浮動
3 設定元素為inline-block
可以解決塌陷問題，但會導致寬度丟失，不推薦使用
4 將元素的overflow設定為一個非visible的值
推薦方式：將overflow設定為hidden（或auto）是副作用作用最小的開啟BFC的方式
在IE6及以下的瀏覽器並不支援BFC，所以使用這種方式不能相容IE6
IE6中具有另一個隱藏屬性叫做hasLayout
該屬性作用和BFC類似，通過hasLayout解決問題
直接將元素的zoom設定為1即可
zoom表放大含義，跟一個數值，元素放大幾倍並且這個樣式只在IE中支援
zoom：1；表示不放大元素，通過該方式開啟hasLayout