清除浮动的方法
简介
在我们开始学习如何清除浮动之前，先来看几个问题：
为什么需要清除浮动？
- 子元素开启了浮动导致父元素没有高度，从而影响到了下方的布局
- 浮动的元素脱离了文档流，导致文档流中的元素与浮动元素所在的区域发生折叠 清除浮动的本质：
- 清除浮动元素脱离标准流所造成的影响 清除浮动的策略：
- 闭合浮动。只让浮动在父元素内部影响，不影响父元素外面的其他元素
- 利用创建了BFC元素的特性，隔离浮动元素
额外标签法（不常用）
-
此方法需要在浮动元素末尾（一定要在末尾，否则浮动可能不会被清除）添加一个空的标签（一般要求是块级元素）。例如
<div style="clear:both"></div>，或者其他标签（如<br/>等）。（clear：both是专门用来清除浮动的样式属性，参数值为both代表周围不允许有浮动对象） -
优点：通俗易懂，书写方便
-
缺点：添加了很多无意义的标签，结构化较差（所以实际开发中不常用到）
-
注意：要求这个新的空标签必须是块级元素或者是
<br/>
<style>
.father {
background-color: #000;
}
.son1,
.son2 {
width: 200px;
height: 200px;
background-color: red;
}
.son1 {
float: left;
}
.son2 {
float: right;
}
</style>
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
<div style="clear: both;" />
</div>
</body>
常规流块盒有个特性就是在自动计算高度的时候会无视浮动元素，所以在上面示例中没如果父元素的末尾没有具有clear属性的块级盒子，最终父元素的高度为0，这种现象称为高度塌陷
在加上了这个空盒子之后，父元素的自动高度就会算上浮动元素
after伪元素法(开发中常用）
- 我们提前在
css文件中写好clearfix这个属性，为其添加after伪元素，需要清除浮动的时候只需要为元素添加上clearfix这个类名即可；这其实上就是刚刚那种方法的变形而已，其底层原理是一样的，都是在父元素的后面添加了一个样式为clear:both的块级元素，只不过一个是嵌套在html文档中的标签，另一个是伪类元素罢了
- 优点：没有添加额外标签，结构简单
- 缺点：由于低版本浏览器不支持
after伪元素，所以具有兼容性问题（除非专门写上样式）
<style>
.father {
background-color: #000;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
.son1,
.son2 {
width: 200px;
height: 200px;
background-color: red;
}
.son1 {
float: left;
}
.son2 {
float: right;
}
</style>
<body>
<div class="father clearfix">
<div class="son1"></div>
<div class="son2"></div>
</div>
</body>
最终和我们预想的效果一样，父元素计算高度的时候会将浮动元素的一起计算进去
创建BFC清除浮动
- 使用方法：给父元素添加样式属性，使其创建
BFC - 本质：这里并没有添加样式为
clear：both的伪元素或标签，那么浮动是怎么被清除的呢？要讲清楚这个解决方案的原理，有一个概念始终是绕不过去，那就是块格式化上下文,也就是我们俗称的BFC。然而这又是一个非常抽象的概念，如果要清楚地把这个概念讲出来，恐怕需要非常大的篇幅，这里仅提及和理解该问题相关的内容。距离关于BFC的内容可以查看我的另一篇文章：juejin.cn/post/709965…
- 优点：书写简单便捷
- 缺点：有的值可能会带来副作用，比如，
overflow属性的scroll值会导致滚动条始终可见，hidden会使得超出边框部分溢出隐藏等
