效果展示
清除浮动前
清除浮动后
原始代码
html 部分
<div class="box1">
盒子一
<div class="subBox1">子盒子一</div>
<div class="subBox2">子盒子二</div>
</div>
<div class="box2">盒子二</div>
css 部分
.box1,
.box2 {
width: 600px;
}
.box1 {
background-color: purple;
}
.subBox1,
.subBox2 {
float: left;
width: 200px;
height: 200px;
}
.subBox1 {
background-color: pink;
}
.subBox2 {
background-color: aqua;
}
.box2 {
height: 200px;
background-color: skyblue;
}
实现方法
空 div 清除
在浮动元素末尾（也就是 子盒子二 的后面）添加一个空的 div 标签，例如：
<div style="clear:both"></div>
缺点：会添加许多无意义的标签，结构语义化较差。
父级使用 after 伪元素
这与上面的空 div 清除的方法是等效的，结构语义化较好。
.box1::after {
content: "";
clear: both;
display: block;
}
父级添加 overflow 属性
可以给浮动元素的父级（也就是 .box1 ）添加 overflow 属性设置为除 visible 外的其他值来触发 BFC。
.box1 {
overflow: hidden;
/* overflow: auto; */
/* overflow: scroll; */
}
可能会出现莫名其妙的滚动条或裁剪阴影，这是使用 overflow 带来的一些副作用。
父级添加 display: flow-root
这是一个较为现代的方案，它可以无需 clearfix 小技巧来创建 BFC，在使用上没有副作用。
.box1 {
display: flow-root;
}
唯一的缺点可能就是兼容性问题，因为它并不像前面的几种解决方案，均可以在所有浏览器中奏效。
原创文章，作者：guozi，如若转载，请注明出处：https://www.sudun.com/ask/82300.html
