文章目录1、什么是BFC2、如何制作BFC3、BFC的特点是什么、4、BFC有什么用、1、解决页边距折叠问题2、制作两段布局3、要素内部浮动5、参考资料
另一方面，什么是BFC公式定义：BFC（Block Formatting Context）块格式化上下文是网页可视CSS呈现的一部分，是区块盒布局过程发生的区域，也是浮动元素与其他元素交互的区域。
人话：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。我们经常用到BFC，只是不知道那是BFC。
二、制作BFC的一般方法如下。
浮动元素(元素的浮动不是none，将浮动指定为left或right将创建BFC )绝对位置元素)元素的位置是absolute或fixed ) display :在线- bloot 尝试为display 3360 table display : flex、display : inline-flex overflow指定非visible值。 不是经常使用代码中上面提到的属性吗？ 不知不觉中打开了BFC。 只是，我不知道那是BFC。
三、BFC有什么特点？ 在BFC中，块级元素从前端垂直排列一个。 (当然，即使不在BFC中，块级元素也是垂直排列的。 )如果两个块级元素属于同一BFC，则它们的上边缘和下边缘相对于较大的元素重叠(或折叠)。 但是，如果两个块级元素分别位于不同的BFC中，则它们的上下距离不重叠，而是两者之和。BFC的区域不会与浮动的元素区域重叠，即不与浮动箱相交，与浮动边缘紧密接触。 计算BFC的高度时，浮动元素也参与计算。 BFC可以包含浮动元素。 (可以利用此特性移除浮动) BFC是页面上隔离的独立容器，容器中的子元素不影响外部元素。 四. BFC有什么用？ 1、解决折叠外部边距问题的“折叠外部边距”(Margin collapsing )也仅发生在属于同一BFC的块级元素之间。
html :
divclass=' div1'/divdivclass=' div2'/div CSS :
. div1 { width: 100px； height: 100px； 背景色： green； 玛格琳- bottom : 10px； }.div2 { width: 100px； height: 100px； 背景色： red； margin-top: 20px； }第一个div的边距底部设置为10px，第二个div的边距顶部设置为20px。 两个框的最终边距为20px，您可以看到它们中较大的一个。 这就是内外距离重叠的问题。
为了解决这个问题，只要将这两个div属于不同的BFC，或者将其中一个div放入BFC即可。 其原因是，BFC是页面上的隔离独立容器，容器中的元素不会影响外部。
html :
divclass=' wrapper ' divclass=' div1'/div/divdivclass=' div2'/div CSS :
.打开wrapper {/* bfc */overflow :隐藏程序； }.div1 { width: 100px； height: 100px； 背景色： green； 玛格琳- bottom : 10px； }.div2 { width: 100px； height: 100px； 背景色： red； margin-top: 20px； }现在的代码可以解决内外距离重叠的问题！ 但是，在此情况下，也可以在position属性中指定absolute和fixed，或者在浮动中指定left和right创建BFC，但该元素将从当前文档流中删除，并且不占用页面空间下面的div会覆盖上面的div。
2、双排布局BFC的区域不会与浮动的元素区域重叠。
利用此特性，可以创建CSS中常用的两级布局。 (左幅固定、右幅适应)。
HTML :
divclass=' left '/divdivclass=' right '/div CSS :
. left { width: 200px； height: 100px； 背景色： green； 浮点：左； }.right { height: 100px； 背景色： red； Overflow :隐藏； /*BFC的创建*/}效果如图所示。
另一种情况：
html :
divclass=' father ' divclass=' left '/divdivclass=' right '哈哈哈，/div/div css :
. father { width: 200px； border : 5px固态蓝色； }.left { width: 50px； height: 50px； 背景色： green； 浮点：左； }.right { height: 100px； 背景色： red； }如果将父元素设置为只有一个箱子浮动，另一个不浮动，则第二个箱子位于第一个箱子下面，部分被覆盖(但不覆盖文字)。 效果如下。
在第二个元素中设置BFC :
. right { height: 100px； 背景色： red； Overflow :隐藏； }效果如下。
3、清除元素内部浮动在此清除浮动的意思是，不清除已设置元素的浮动属性，而是清除浮动属性设置后对其他元素的影响。 例如，如果将子元素设置为浮动，则父元素的高度将无法支撑。
BFC有一个特性。 计算BFC的高度时，浮动元素也参与计算，可以利用该特性消除浮动。
html :
divclass=' div1' divclass=' son1' a/divdivclass=' son2' b/div/div CSS :
. div1 { width: 150px； border : 1px固态硬盘；/*使用bfc清除浮动*/overflow :隐藏； }.son1， son2 { width: 100px； height: 100px； 背景色：蓝色； 浮点：左； }.son2{背景色： green yellow； }
五.参考块格式上下文| MDN
CSS-BFC -简表
CSS的BFC详细信息- Chen_cong -博客圈
前端学习交流QQ群，群内学习讨论氛围很好，大人物云集，欢迎加入：点击862748629加入