最近在梳理前端CSS部分时，发现常规的清除浮动方式之一的clear:both，现在网上推荐的流行都是下面的方式：
.clearfix::after,
.clearfix::before {
display: table;
content: '';
}
.clearfix::after {
clear: both;
}
我记得很久很久以前（(￣▽￣)~*）的做法就只设置了一个after伪元素，然后display:block。
于是乎，问题来了，为什么现在流行要给伪元素设置diaplay:table，而且还给before伪元素也加上了。
看了网上很多人解释说设置diaplay:table是为了构成BFC解决上边距重叠问题，按照我自己的理解，这种场景不应该是这样的吗 ：
<!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>
.test {
background-color: blueviolet;
height: 20px;
margin: 20px 0;
}
.box-wrapper {
background-color: rgb(214, 76, 152);
margin: 20px 0;
}
.box {
float: left;
width: 100px;
height: 50px;
background-color: aquamarine;
margin: 0 20px;
}
.clearfix::after
.clearfix::after {
display: table;
content: '';
}
.clearfix::after {
clear: both;
}
</style>
</head>
<body>
<div class="test">巴拉巴拉</div>
<div class="box-wrapper clearfix">
<div class="box">dd</div>
<div class="box">dd</div>
<div class="box">dd</div>
</div>
<div class="test">巴拉巴拉</div>
</body>
</html>
test和box-wrapper都在垂直方向添加了margin，如果说给伪类设置了display：table使其上下构成了独立的BFC，那么根据BFC的规则，test和box-wrapper就不会发生margin垂直方向的重叠。但是。。。。。，结果却是仍然发生重叠了。
所以我凌乱了。。。
这和设置成block没啥区别啊~
于是乎我就尝试各种情况，发现在当浮动元素为空的时候居然没有发生重叠了
而且，我把before伪类去除也不影响~。而且这种空的情况，我解决边距重叠也没啥意义啊。
所以这种写法究竟是为了啥？
于是搜啊搜到这种场景了
<div class="box-wrapper clearfix">
<div class="box">dd</div>
<div class="box">dd</div>
<div class="box3">dd</div>
</div>
.box3 {
width: 100px;
height: 50px;
background-color: rgb(158, 235, 15);
margin: 20px 0 20px 300px;
}
box3不是浮动元素，其设置了上下margin，看下效果：
边距效果没有问题，继续测试：
①将.clearfix::before伪元素去掉，发现上边距塌陷了。
②将.clearfix::before伪元素保留但是将display设置成block，发现上边距还是塌陷
于是我带着怀疑的角度索索了关于BFC的解释，发现是自己对BFC的规则理解的不够透彻╮(╯_╰)╭
BFC特性：
1、BFC所确定的区域不会与外部浮动元素发生重叠
2、位于同一BFC下的相邻块级子元素在垂直方向上会发生margin重叠
3、位于不同BFC下的相邻元素之间不会发生margin重叠
个人的忽略点：
1、BFC容器与其兄弟间仍是相同上下文，故在BFC容器与其兄弟之间仍会发生margin重叠，所以我第一时间想到的示例以及想法是完全错误的o(TωT)o 。
2、位于同一BFC下的相邻块级子元素在垂直方向上会发生margin重叠，重点是相邻，如过不相邻就不会产生margin重叠。
针对第二条的示例：
<div style="overflow: hidden;">
<div style="background: red;margin: 20px;">xxxxx</div>
<div style="display: table;"></div>
<div style="background: red;margin: 20px;">xxxxx</div>
</div>
在2个相邻的块级元素中间插入一个空的div并且将此div创建成BFC，至此就阻隔了2个div，从而解决margin重叠问题。
对于clearfix我的个人理解（非专业）：
针对浮动块级元素的相邻非浮动的元素如若其添加了上下的margin，因为浮动元素脱离了文档流，，其实际与其父元素产生了margin重叠，导致margin塌陷，并且设置的margin效果作用与父元素。使用before伪类就是在中间插入BFC，间隔上下文，以解决margin重叠现象。
