CSS清除浮动总结

下面介绍一下小白实现清除浮动的三个思路：

1. 使用伪类清除浮动
2. 给父元素添加一个空白元素，再对这个元素清除浮动
3. 制造BFC

第一种思路：给需要清除浮动的元素添加一个after伪类，然后对伪类清除浮动，举个栗子：

<div class="clearfix">
    <img class="img1" src="https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg" />
    <img class="img2" src="https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg" />
</div>
<style>
    .clearfix {background: red;}
    .clearfix:after {content: ''; display: block; clear: both;}
    .img1 {float: left;}
    .img2 {float: right;}
</style>
           

 以上代码对.clearfix类添加一个after伪类，然后对这个伪类清除浮动，清除浮动的核心代码就是：content: ' '; display: block; clear: both（划重点^*^）

第二种思路：在需要清除浮动的元素末尾添加一个清除浮动的空块级子元素，举个栗子：

<div class="outer">
    <img class="img1" src="https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg" />
    <img class="img2" src="https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg" />  
    <div class="clearfix"></div>
</div>
<style>
    .outer {background: red;}
    .clearfix {clear: both;}
    .img1 {float: left;}
    .img2 {float: right;}
</style>
           

在上面的这段代码中，图片分别进行左右浮动，然后在.outer元素最后添加一个清除浮动的空块级子元素，这样也能实现清除浮动。

第三种思路：创建BFC（Block Fromatting Context），即块级格式化上下文，BFC是一种特殊的容器，这种容器有一个特性就是容器内部的内容和外部的内容互不影响，借助这个原理，把浮动元素放在这种容器内部让浮动元素和容器外部元素互不影响，从而实现清除浮动的效果。下面首先介绍一下生成BFC的方法4种方法：

1. 将元素设置为浮动
2. 将元素设置为绝对定位
3. 将元素的overflow属性设置为非visible值，例如hidden、auto
4. 将元素的display属性inline-block、table-cell、flex、table-caption、inline-flex中的任意一个

只要元素满足以上任意一种条件就会生成BFC，小白在用overflow: auto举个栗子：

<div class="clearfix">
    <img class="img1" src="https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg" />
    <img class="img2" src="https://avatar.csdn.net/7/7/B/1_ralf_hx163com.jpg" />
</div>
<style>
    .clearfix {overflow: auto; background: red;}
    .img1 {float: left;}
    .img2 {float: right;}
</style>
           

以上代码把.clearfix元素的overflow属性设置为auto，这样就使.clearfix元素生成了BFC，从而消除浮动元素对BFC外部元素造成的影响。

总结：大家在测试的过程中可能会发现红色的背景，这是需要清除浮动的元素的背景颜色，红色出现则说明清除浮动成功，因为如果清除浮动失败的话，元素的高度会为0，不显示红色背景。