我相信在各种前端学习教程和视频中都会看到这样的代码
. clearfix :3360 after { content : '； 显示： block； clear: both； }我也知道教程中说，将此属性附加到消除高度消沉的元素可以解决问题，但教程中并没有说明为什么这样写。 本文将了解高级情绪低落的原因和解决方法，并详细说明此代码的来源。
先行知识：
bfc https://developer.Mozilla.org/zh-cn/docs/web/guide/CSS/block _ formatting _ context
BFC定义了对MDN的解释
块格式上下文(BFC )是网页的视觉CSS呈现的一部分，是发生块框布局处理的区域，也是浮动要素与其他要素交互的区域。
听起来像云，但这是文档的问题，用一堆无法理解的概念名词来解释无法理解的概念名词。
简单来说，BFC是一个独立的渲染区域，在该区域内规定了常规流的块盒的布局，切断了内部和外部的联系，内部的渲染不影响外部
BFC的作用是创建BFC的要素，其自动高度需要计算浮动要素
创建边界框不与浮动元素重叠的BFC元素
创建BFC的元素不会将其子元素与外部边距合并
本文只讨论暂时浮动导致的崩溃
创建BFC
总结如下
如果根元素的html标记的float属性不为none，overflow属性不为visible，则显示属性为inline-block、table-cell、table-caption、flex、inline 位置属性为absolute或fixed时，contain值为layout、content、paint时，高度塌陷高度塌陷是什么意思？
已知如果父元素没有固定高度值，子元素将扩展高度并显示以下代码
可见，即使从子元素开始，父元素的高度也为100px。 为什么宽度是整个画面的问题也很简单。 div是块级元素，独占一行，所以在此不展开。
在此，将子元素son1设定为浮动
你可以看到父母的高度是0px
再来看看另一个例子
其中，母元素的高度(未给出固定值的情况下)通过子元素扩展，但http://www.Sina.com/http://www.Sina.com/http://www.Sina.com/http://www
这句话非常重要。 这句话解释了高度塌陷的原因，并提供了解决高度塌陷的方法。
高度崩溃是因为没有计算浮动元素的高度，但是父元素计算高度时如何将浮动元素的高度相加？
另外，请记住，首先论述BFC作用的是创建BFC的元素，其自动高度需要计算浮动元素。
BFC解决高度塌陷进化解决高度塌陷，创建BFC块
根元素的html标记
根标记在这里不匹配。 跳过
如果浮点属性不是none
上传代码：
在父元素上设置浮动属性后，可以看到父元素的高度再次从子元素扩展到100px的值。
如果溢出属性不是visible
上传代码：
这里只测试其中的两个属性。 其他属性也一样。 请自己试试。
如果overflow为visible，则高度将再次聚合，因为没有创建BFC块
显示属性为inline-block、table-cell、table-caption、flex、inline-flex (剩下的不太常见，不需要记忆) )时
上传代码：
其他情况也一样，在这里不怎么做测试
如果位置属性为absolute或fixed
位置为relative时
由此可见，创建BFC的元素确实会重新计算浮动元素的高度。
返回到开头的问题，向父元素中添加clearfix类
根元素的html标记
如果浮点属性不是none
如果溢出属性不是visible
显示属性为inline-block、table-cell、table-caption、flex、inline-flex (剩下的不太常见，不需要记忆) )时
如果位置属性为absolute或fixed
contain 值为 layout, content, paint 的时候在上面演示的五种创建 BFC 块的方法中都可以解决高度塌陷问题，但是每种方法多多少少会有一些缺陷，或者说是会破坏我们希望的布局。我们细致列出每次情况可能会遇到的问题。
根元素 html 标签
这个没什么好说的，一个页面就一个根标签，我们不可能创建多个。
float 属性不为 none 的时候
float 属性会让父元素离开原有的流动模型，会破坏我们原先的理想效果，得不偿失
overflow 不为 visible
讲道理 overflow 属性设置为 hidden 时影响也挺小的，但如果设置为 scroll 的话，会出现滚动条边框，视觉效果还是挺明显的不推荐，当然你本来就像滚动条出现那没事了。
display 的多个属性
设置为 inline-block 影响其实也不大，因为设置为 行块盒不会对布局产生影响，但是影响大的是其他属性，比如设置为 flex 时，会变成 flex 布局模型。
position 属性为 absolute 或者 fixed 的时候
创建 BFC 块时这两个属性影响估计是最大的，设置这两个属性会使该 BFC 块真正的脱离文档流，用这两个属性创建 BFC 块极不推荐
最后有同学可能会说可以给父元素设置一个固定高度，这确实是个解决方法，但是也有个致命缺陷，我们知道在日常的开发中，我们很多情况一个元素的高度是不确定的，比如你刷评论区的时候有加载更多按钮，这时我们不可能给父元素设置固定高度，我们只能让高度由子元素撑开。
看回开头的代码
.clearfix::after { content :''; display: block; clear: both;}给要清除浮动的元素添加一个伪元素，这样写的目的也是为了把未知的影响降到最低，我们知道这里最关键的一个属性是 clear:both ，（clear是用来清除浮动用到，可选值有 float,left,both）, 但是如果我们直接这样子写：
无疑改变了原有的 DOM 结构，所以我们使用 伪元素 ::after，因为伪元素是 CSS 渲染是才加上去的，而且不会改变原有的 DOM 结构，简单的说就是 伪元素不算 DOM元素。