首页 > 教程

HTML清除浮动的几种方法

slbcun
2025-04-07
1080 ℃

父元素浮动

给父元素设置浮动后，子元素的浮动会归位，不过如果还有父元素，还需要设置。不推荐使用。

空标签设置

在元素末尾插入一个无意义标签，并且设置css为clear

<div style="background: #000;">
  <p style="float: left;color:#fff">我是浮动内容</p>
  <div style="clear: both;"></div>
</div>

设置伪类方式

使用伪类的，给清除浮动，比较流行使用这个。

<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;