HTML盒子模型的边框塌陷问题
作者：互联网
有些在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">
标签：盒子,background,100px,高度,边框,塌陷,HTML,设置,hidden 来源： https://www.cnblogs.com/sncsgo02/p/15987106.html