HTML清除浮动的几种方法

韩小韩
2021-05-20 / 0 评论 / 11 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年05月26日,已超过26天没有更新,若内容或图片失效,请留言反馈。

父元素浮动

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

空标签设置

在元素末尾插入一个无意义标签,并且设置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;
0

评论 (0)

取消