清除浮动的四种方式及其原理

前言：

什么是浮动，浮动给我们造成了什么困扰，我们该使用什么方式来解决它。下面会介绍到为什么要清除浮动以及清除浮动的四种方式。

一、为什么要清除浮动

在我们的开发过程中，浮动元素是css中最常用的属性，浮动起来的元素会脱离标准流，如果我们的父级盒子没有设置高度就会造成父级盒子的高度塌陷，就会影响我们下面盒子的正常显示。
什么是高度塌陷呢，我们用一个小小的案例来了解一下，请看下面代码。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.father {width: 100%;border: 2px solid red;}.son {width: 300px;height: 300px;border: 2px solid blue;}.box {width: 100%;height: 300px;background-color: green;}</style></head><body><div class="father"><div class="son"></div><div class="son"></div></div><div class="box"></div></body>
</html>

效果图如下

请注意此时我并没有给father这个盒子设置高度，接下来给son盒子设置一个左浮动

     .son {width: 300px;height: 300px;border: 2px solid blue;float: left;}

请看效果图

我们发现father盒子成为一条红线，box盒子跑到son盒子的后面，这就是因为father盒子没有高度，在没有设置浮动之前son盒子是属于标准流的，son盒子会把father盒子撑开，一旦给son盒子设置浮动，它就会立即脱离标准流浮动起来（就是离开father盒子），而father没有设置高度，在失去son盒子支撑的时候就会变成一条横线，随即下面的box盒子就会跟随father盒子跑上去。这就是造成高度塌陷的原因。
高度塌陷会影响到我们下面的盒子，所以我们需要将浮动的son盒子重新塞回father盒子，也就是清除浮动，让我们的box盒子正常显示。

二、清除浮动的第一种方式—给父级盒子添加高度

造成高度塌陷的原因就是父盒子没有高度，我们只需要给父盒子添加一个高度即可

     .father {width: 100%;border: 2px solid red;height: 300px;}

效果如下

原理： 我们上面说到，造成高度塌陷的原因就是父盒子没有高度，我们只需要给父盒子添加一个高度即可，但是这种方式并不推荐使用，因为有很多局限性，况且son盒子依然是脱离标准流，并没有回到father盒子中，所以做一个简单的了解即可。

三、清除浮动的第二种方式—额外标签法

额外标签法会在浮动元素末尾添加一个空的标签。给这个标签设置clear属性，注意这个标签必须是块级元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.father {width: 100%;border: 2px solid red;}.son {width: 300px;height: 300px;border: 2px solid blue;float: left;}.box {width: 100%;height: 300px;background-color: green;}.clear {clear: both;} //为标签设置清除浮动</style></head><body><div class="father"><div class="son"></div><div class="son"></div><div class="clear"></div></div><div class="box"></div>//添加清除浮动标签</body>
</html>

效果图如下

原理： clear：both的作用是不允许周围有浮动现象，所以就可以达到清除浮动的效果，但是这样做，对于比较复杂的页面就显得结构非常的乱，所以不推荐使用

四、清除浮动的第三种方式—给父级添加 overflow 属性

这个方法是向浮动元素的父级盒子添加voerflow：hidden属性，这样就可以达到清除浮动的效果

 .father {width: 100%;border: 2px solid red;overflow: hidden;}

效果如下

原理： 让我们先来了解一下BFC（Block Formatting Context），BFC全称是块级格式化上下文，用于对块级元素排版，默认情况下只有根元素（body）一个块级上下文，但是如果一个块级元素设置了float:left,overflow:hidden或position:absolute样式，就会为这个块级元素生产一个独立的块级上下文，使这个块级元素内部的排版完全独立。也就是说独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，就是说包含块会把浮动元素的高度也计算在内，这样就达到了清除浮动的效果，但是overflow:hidden本身的意思是溢出的元素隐藏显示，所以说有一定的缺点，大家可以根据情况来使用它。

五、清除浮动的第四种方式—给父级添加after伪元素

利用after伪元素定义一个clearfix类，浮动元素的父级元素调用此类可以实现清除浮动的效果

 .clearfix::after {content: "";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {/* IE6、7 专有 */*zoom: 1;}

<body><div class="father clearfix"><div class="son"></div><div class="son"></div></div><div class="box"></div></body>

效果图如下

原理： 这个方式的原理和额外标签法的方式异曲同工，只是利用伪类向浮动元素的父盒子的后面添加了一个块级元素，至于*zoom: 1这个属性，是为了兼容低版本的浏览器。这种方式没有增加标签，结构更简单，也没有overflow带来的隐藏影响，很推荐使用这样的方式。

能力有限，文章难免会有不全面的问题，欢迎大家交流指正