CSS浮动时导致的高度塌陷
2020-04-02 本文已影响0人
84ccd3db434d
塌陷的影响：标志元素的位置将会往上移动导致整个页面混乱
解决塌陷的三种方法：
1）墙内法
<style>
.outer .clearfix{
clear:both;
}
</style>
<body>
<div class="outer">
<div class="div1">
<div class="div2">
<div class="clearfix"> <!--增加一个clearfix-->
</div>
</body>
2)给外元素添加overflow: hidden
<style>
.outer{
overflow:hidden;
}
</style>
3) 双伪元素浮动
<style>
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
<body>
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
