HTML盒子模型的邊框塌陷問題
阿新 • • 發佈：2022-03-09
有些在html佈局中，為了更加靈活，會使用沒有設定高度的盒子，讓子盒子來控制父盒子的高度，在靈活方便的同時也會有可能出現父盒子邊框塌陷問題。
1 <title>盒子模型</title> 2 <style> 3 #man{ 4 width: 300px; 5 6 background-color: red; //紅色 7 } 8 #min{ 9 width: 100px; 10 height: 100px; 11 background-color: aqua; //淺綠色 12 float: left;
}
14 #end{ 15 width: 200px; 16 height: 100px; 17 background-color: burlywood; //實木色 18 } 19 </style> 20 </head> 21 <body> 22 <div id="man"> 23 <div id="min"></div> 24 </div> 25 <div id="end"></div> 26 </body>
由於父盒子沒有設定高度，父盒子自適應子盒子高度，且子盒子設定了浮動，子盒子退出文件流，原本的位置不再佔據，自適應高度的父盒子高度變為0， 父盒子後面的盒子會佔據原本父盒子的位置。
所以父盒子紅色不顯示。
解決父盒子邊框塌陷問題：
1.設定父盒子高度（不推薦使用，會失去靈活性）。
2.在父盒子裡設定一個空白的div，設定空白div的css樣式clear: both（不推薦使用）。
3.給父盒子新增屬性 overflow: hidden; 也不推薦使用，因為overflow: hidden；還有一個主要作用，超出父盒子的內容會被隱藏。
4.使用偽類（推薦）。
.pseudo:after{
visibility:hidden;
clear:both;
display:block;
content:".";
height:0
clear: both;
}
<div id="man" class="pseudo">