HTML清除浮动的几种方法
父元素浮动
给父元素设置浮动后，子元素的浮动会归位，不过如果还有父元素，还需要设置。不推荐使用。
空标签设置
在元素末尾插入一个无意义标签，并且设置css为clear:both;
<div style="background: #000;">
<p style="float: left;color:#fff">
我是浮动内容
</p>
<div style="clear: both;"></div>
</div>设置伪类方式
使用伪类的:after方式，给清除浮动，比较流行使用这个。
<style type="text/css">
.clearfix:after{
content: '.';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
<div style="background: #000;" class="clearfix">
<p style="float: left;color:#fff">
我是浮动内容
</p>
</div>上面的css可以进一步优化
.clearfix:after{
content: '';
display: table;
clear: both;
}显示方式属性
给父元素设置overflow，即可清除里面的浮动
<div style="background: #000;overflow: auto;">
<p style="float: left;color:#fff">
我是浮动内容
</p>
</div>BFC属性
只要触发了bfc，就会清除浮动
相关触发：
overflow: auto;
overflow: hidden;
display: inline-block;
display: table-cell;
display: table-caption;
position: absolute;
position: fixed;
float: left;
float: right;本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-05-20，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
