前言：

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。 css浮动

但是使用了 float 后不清除浮动就会出现父级高度塌陷问题

造成的后果就是父元素高度为0，浮动元素的内容撑不开父元素，这种时候就需要清除浮动

.container{border: 5px  solid#eee;}    .media {width: 100px;height: 100px;float: left;background-color:aquamarine;}.container p{float: left;}<div class="container"><div class="media"></div><p>hello</p></div>

下面介绍清除浮动的方法

方法一：使用带clear属性的空元素

在浮动元素后使用一个空元素，并在CSS中设置 clear 属性即可清理浮动

亦可使用 <br class="clear" /> 或 <hr class="clear" /> 来进行清理。

<div class="clear"></div>.clear{clear:both;
}

clear 属性指定元素两侧不能出现浮动元素

效果图：（可以看到父元素被撑开，说明清除浮动生效）

优点：简单，代码少，浏览器兼容性好。
缺点：不太适合语义化，代码不够优雅，后期不容易维护。

方法二：使用CSS的overflow 属性

给浮动元素的容器添加 overflow:hidden;或 overflow:auto;可以清除浮动

这是我常用的一种方法，在另一篇文章也是使用 overflow属性清除浮动

 .container{border: 5px  solid#eee;overflow: auto; /*  或者  overflow: hidden;   */}.media {width: 100px;height: 100px;float: left;background-color:aquamarine;}.container p{float: left;}<div class="container"><div class="media"></div><p>hello</p></div>

使用以上代码也可以达到清除浮动的效果

方法三：使用CSS的::after 伪元素

结合 ::after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）
给浮动元素的容器添加一个 clearfix 的 class，然后给这个 class 添加一个 ::after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

.container{border: 5px  solid#eee;}.container::after{content: "020"; display: block; height: 0; clear: both; /* 表示元素不可见 */visibility: hidden;  }.media {width: 100px;height: 100px;float: left;background-color:aquamarine;}.container p{float: left;}<div class="container"><div class="media"></div><p>hello</p></div>

通过CSS伪元素在容器的内部元素最后添加了一个看不见的"020" ( visibility: hidden; )，

并且赋予clear属性来清除浮动。