最近在梳理前端CSS部分時(shí)对妄，發(fā)現(xiàn)常規(guī)的清除浮動(dòng)方式之一的clear:both，現(xiàn)在網(wǎng)上推薦的流行都是下面的方式：
.clearfix::after,
.clearfix::before {
display: table;
content: '';
}
.clearfix::after {
clear: both;
}
我記得很久很久以前（(￣▽?zhuān)?~*）的做法就只設(shè)置了一個(gè)after偽元素裹纳，然后display:block。
于是乎，問(wèn)題來(lái)了闯团，為什么現(xiàn)在流行要給偽元素設(shè)置diaplay:table，而且還給before偽元素也加上了仙粱。
看了網(wǎng)上很多人解釋說(shuō)設(shè)置diaplay:table是為了構(gòu)成BFC解決上邊距重疊問(wèn)題房交，按照我自己的理解，這種場(chǎng)景不應(yīng)該是這樣的嗎 ：
<!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伐割，如果說(shuō)給偽類(lèi)設(shè)置了display：table使其上下構(gòu)成了獨(dú)立的BFC候味，那么根據(jù)BFC的規(guī)則，test和box-wrapper就不會(huì)發(fā)生margin垂直方向的重疊隔心。但是白群。。硬霍。帜慢。。，結(jié)果卻是仍然發(fā)生重疊了粱玲。
所以我凌亂了侍咱。。密幔。
這和設(shè)置成block沒(méi)啥區(qū)別啊~
于是乎我就嘗試各種情況楔脯，發(fā)現(xiàn)在當(dāng)浮動(dòng)元素為空的時(shí)候居然沒(méi)有發(fā)生重疊了
而且，我把before偽類(lèi)去除也不影響~胯甩。而且這種空的情況昧廷，我解決邊距重疊也沒(méi)啥意義啊。
所以這種寫(xiě)法究竟是為了啥偎箫？
于是搜啊搜到這種場(chǎng)景了
<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不是浮動(dòng)元素木柬，其設(shè)置了上下margin，看下效果：
邊距效果沒(méi)有問(wèn)題淹办，繼續(xù)測(cè)試：
①將.clearfix::before偽元素去掉眉枕，發(fā)現(xiàn)上邊距塌陷了。
②將.clearfix::before偽元素保留但是將display設(shè)置成block怜森，發(fā)現(xiàn)上邊距還是塌陷
于是我?guī)е鴳岩傻慕嵌人魉髁岁P(guān)于BFC的解釋?zhuān)l(fā)現(xiàn)是自己對(duì)BFC的規(guī)則理解的不夠透徹╮(╯_╰)╭
BFC特性：
1速挑、BFC所確定的區(qū)域不會(huì)與外部浮動(dòng)元素發(fā)生重疊
2、位于同一BFC下的相鄰塊級(jí)子元素在垂直方向上會(huì)發(fā)生margin重疊
3副硅、位于不同BFC下的相鄰元素之間不會(huì)發(fā)生margin重疊
個(gè)人的忽略點(diǎn)：
1姥宝、BFC容器與其兄弟間仍是相同上下文，故在BFC容器與其兄弟之間仍會(huì)發(fā)生margin重疊恐疲，所以我第一時(shí)間想到的示例以及想法是完全錯(cuò)誤的o(TωT)o 腊满。
2、位于同一BFC下的相鄰塊級(jí)子元素在垂直方向上會(huì)發(fā)生margin重疊培己，重點(diǎn)是相鄰碳蛋，如過(guò)不相鄰就不會(huì)產(chǎn)生margin重疊。
針對(duì)第二條的示例：
<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個(gè)相鄰的塊級(jí)元素中間插入一個(gè)空的div并且將此div創(chuàng)建成BFC省咨，至此就阻隔了2個(gè)div肃弟，從而解決margin重疊問(wèn)題。
對(duì)于clearfix我的個(gè)人理解（非專(zhuān)業(yè)）：
針對(duì)浮動(dòng)塊級(jí)元素的相鄰非浮動(dòng)的元素如若其添加了上下的margin茸炒，因?yàn)楦?dòng)元素脫離了文檔流愕乎，，其實(shí)際與其父元素產(chǎn)生了margin重疊壁公，導(dǎo)致margin塌陷感论，并且設(shè)置的margin效果作用與父元素。使用before偽類(lèi)就是在中間插入BFC紊册，間隔上下文比肄，以解決margin重疊現(xiàn)象快耿。
