1. 使用clearfix清除浮动
.float {
float: left;
}
.clearfix{
clear: both;
}
<main>
<div class="float"></div>
<div class="float"></div>
<div class="clearfix"></div>
</main>
2. 使用After伪元素清除浮动
.float {
float: left;
}
main::after {
content: ""
clear: both;
display: block;
}
<main>
<div class="float"></div>
<div class="float"></div>
<div class="clearfix"></div>
</main>
3. Overflow触发BFC清除浮动
.float {
float: left;
}
main {
overflow: hidden;
/*overflow: auto; 也可以*/
}
<main>
<div class="float"></div>
<div class="float"></div>
<div class="clearfix"></div>
</main>
版权声明:本文为HeiXueJi原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。