相信大家在各类前端学习教程或者视频中都会看到这样一段代码

.clearfix::after {content :'';display: block;clear: both;
}

我们也知道教程会说给要清除高度塌陷的元素加上这个属性就能解决问题，但是教程却没说为什么这样写，本文章将深入带你理解高度塌陷产生的原因和怎么解决，并解释这段代码的由来。
前置知识：

BFC

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

BFC 定义

MDN 的解释
块格式化上下文（Block Formatting Context，BFC）是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

听起来云里雾里，这是文档的一个问题，用一堆不理解的概念名词来解释不理解的概念名词。
简单的来说 BFC 是一块独立的渲染区域，它规定在该区域内，常规流的块盒的布局，且创建 BFC 的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部。

BFC 的作用

创建 BFC 的元素，它的自动高度需要计算浮动元素
创建 BFC 的元素，它的边框盒不会与浮动元素重叠
创建 BFC 的元素，不会和它的子元素进行外边距合并
本文章暂时只讨论浮动导致塌陷问题

BFC 的创建

总结起来就是以下

根元素html标签
float属性不为none的时候
overflow属性不为visible的时候
display属性为inline-block、table-cell、table-caption、flex、inline-flex（其余不常见不需要记忆）的时候
position属性为absolute或fixed的时候
contain 值为 layout, content, paint 的时候

高度塌陷

高度塌陷是什么意思？
我们知道，如果一个父元素不设置固定高度值，那么他的高度将由子元素撑开来看下面代码

我们可以看到父元素的高度由子元素撑开也为 100px, 为什么宽度是一整个屏幕，这问题也很简单，因为 div 是块级元素，独占一行，这里不展开。
此时我们给子元素 son1 设置浮动

此时我们可以看到父元素的高度变成了 0px
我们再看一个例子

看到这里我们得出一个结论，父元素的高度（如果没有给定一个固定的值）是由子元素撑开，但是 父元素计算高度时不会加上设置了浮动属性的子元素
父元素高度计算不会加上设置了浮动属性的子元素
父元素高度计算不会加上设置了浮动属性的子元素
父元素高度计算不会加上设置了浮动属性的子元素
这句话非常关键，这句话解释了高度塌陷的原因，也提供了解决高度塌陷的方法。
高度塌陷既然是因为没有计算浮动元素高度造成的，那么什么方法能让父元素计算高度时加上浮动元素的高度呢？
还记得上面说到 BFC 作用第一条说的就是创建 BFC 的元素，它的自动高度需要计算浮动元素。

BFC 解决高度塌陷的演化

解决高度塌陷，创建 BFC 块

根元素html标签
根标签在这里不符合，略过
float属性不为none的时候
上代码：

我们可以看到给父元素设置了 float 属性后（float:right 同理），父元素的高度再次由子元素撑开值为 100px.
overflow属性不为visible的时候
上代码：
这里只测试其中两个属性，其他属性同理，自己可以动手试试。

当 overflow为visible 时高度再次塌陷，因为此时没有创建 BFC 块
display属性为inline-block、table-cell、table-caption、flex、inline-flex（其余不常见不需要记忆）的时候
上代码：
其他情况同理，这里不多做测试
position属性为absolute或fixed的时候

当 position 为 relative 时

由此我们可以看到创建了 BFC 的元素确实会重新计算浮动元素的高度。
回到开头的那个问题，给父元素加上 clearfix 类
根元素html标签
float属性不为none的时候
overflow属性不为visible的时候
display属性为inline-block、table-cell、table-caption、flex、inline-flex（其余不常见不需要记忆）的时候
position属性为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元素。

深度理解 BFC，解决高度塌陷问题相关推荐

解决高度塌陷问题（非BFC解决方式）
高度塌陷: 1.在文档流中,如果没有设置宽度,则父元素的宽度为auto,父元素高度由内容撑开. 2.如果父元素塌陷,则父元素下的兄弟元素会上移,导致页面布局混乱. 3.当子元素设置浮动,则子元素脱离文 ...
解决高度塌陷的几种方法
引入进行页面布局时,为了能够达到自适应,通常高度是不会进行固定设置的,而使用float进行元素的浮动后,由于没有内容的高度,所以会发生父元素的高度塌陷问题,为了解决此类问题这里给出了几种解决方法. ...
如何解决高度塌陷【超全面】
高度塌陷是什么? 父元素的高度一般是被子元素或者内容撑开,若设置子元素浮动,则子元素就会脱离文档流,也就撑不开父元素的高度了.从而导致父元素的高度丢失,页面布局混乱如何解决高度塌陷? 解决高度塌陷的 ...
html标签高度塌陷,CSS中如何解决高度塌陷问题
CSS中如何解决高度塌陷问题发布时间:2021-06-11 18:23:40 来源:亿速云阅读:58 作者:Leah 这篇文章将为大家详细讲解有关CSS中如何解决高度塌陷问题,文章内容质量较高,因 ...
HTML外边框塌陷什么意思,html如何解决高度塌陷问题
本章给大家介绍html如何解决高度塌陷问题.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 高度塌陷的问题: 当开启元素的BFC以后,元素将会有如下的特性: 1 父元素的垂直外边距不 ...
高度塌陷问题和解决高度塌陷问题
目录什么是高度塌陷解决高度塌陷问题什么是高度塌陷在文档流中,父元素的高度默认是由子元素撑开的,等于说子元素多高,父元素就多高,但是当为子元素设置了浮动之后,子元素会脱离文档流,此时,将会导致子 ...
使用clear,after完美解决高度塌陷
clear:清除浮动对下一个元素的布局影响上面开启BFC的第一种方法可能会对下一个元素的布局产生影响,针对这种影响, 我们可以设置下一个元素的clear属性,可选值: left: 清除向左浮动元素对 ...
在html中通过使用css解决高度塌陷问题
目录 1. 我们先写两个盒子用来演示 2.接下来我们开始演示解决方法: 1.给父元素添加一个固定的高度 2.给父元素添加一个overflow: hidden; 3.在父元素里最后添加一个空的块元素 ...
解决高度塌陷：万能清除法
逆战班高度塌陷:当父元素不设置高度时,其他高度会随着里面的子元素的高度的变化而变化,即父元素的高度由子元素的高度撑开,达到高度自适应的目的.而当父元素的**第一级子元素都设置了浮动**时,父元素不 ...

深度理解 BFC，解决高度塌陷问题

BFC