css解决高度塌陷
解决css中浮动出现的高度塌陷问题,首先,不解决高度塌陷的效果:
* {
margin: 0;
padding: 0;
}
.box1 {
width: 200px;
border: 6px solid red;
}
.flot {
float: left;
width: 100px;
height: 100px;
background-color: slateblue;
}
<body>
<div class="box1">
<div class="flot"></div>
</div>
</body>
1.为父元素开启BFC
.box1 {
width: 200px;
border: 6px solid red;
overflow: hidden; //开启BFC
}
2.利用伪类清除浮动
.box1 {
width: 200px;
border: 6px solid red;
}
.box1::after {
content: '';
display: table;
clear: both;
}
解决后的效果: