css清除浮动（clearfix）的3种方式

一、背景

css中使用了float浮动元素，导致页面中某些元素不能正确的显示。

二、浮动引起的后果

（1）由于浮动元素脱离了文档流，所以父元素的高度无法被撑开，影响了与父元素同级的元素。
（2）与浮动元素同级的非浮动元素会跟随其后，因为浮动元素脱离文档流不占据原来的位置。
（3）如果该浮动元素不是第一个浮动元素，则该元素之前的元素也需要浮动，否则容易影响页面的结构显示。

三、css清除浮动3种方式

1.父元素使用overflow属性

（1）用法

overflow:hidden;

或者

overflow:auto;

（2）拓展

（3）说明

当给父元素设置了overflow样式，本质就是建构了一个BFC(块级格式化上下文)，使得达到撑起父元素高度的效果。
.
.
.

2.用:after伪类（::after 选择器在被选元素的内容后面插入内容）

（1）用法

.clearfix::after {
    content: "";
    display: block;
    visibility: hidden;
    clear: both;
}

（2）说明

给父级元素添加了一个::after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的。
.
.
.

3.添加空标签，使用clear:both属性（不建议使用该方法）

（1）用法

<div style="clear: both"></div>

（2）说明

在代码中在放一个空的div标签，然后给这个标签设置clear:both来清除浮动对页面的影响。
优点：简单，方便兼容性好。
缺点：因为会造成结构混乱，不利于后期维护。