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;