摘要：两个兄弟盒之间的竖直距离由属性决定。即使存在浮动尽管一个盒的行盒可能会因为浮动收缩，这也成立。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。
前言
在面试中，我们经常会遇到一个常见的面试题，什么是BFC?于是我就去查阅了相关资料：
css规范中是这样描述BFC的9.4.1 块格式化上下文
浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和"overflow"不为"visible"的块盒会为它们的内容建立一个新的块格式化上下文
在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由"margin"属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并
在一个块格式化上下文中，每个盒的left外边（left outer edge）挨着包含块的left边（对于从右向左的格式化，right边挨着）。即使存在浮动（尽管一个盒的行盒可能会因为浮动收缩），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）
mdn是这样描述的一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。
一个块格式化上下文由以下之一创建：
1)根元素或其它包含它的元素 2)浮动元素 (元素的 float 不是 none) 3)绝对定位元素 (元素具有 position 为 absolute 或 fixed) 4)内联块 (元素具有 display: inline-block) 5)表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性) 6)表格标题 (元素具有 display: table-caption, HTML表格标题默认属性) 7)具有overflow 且值不是 visible 的块元素， 8)display: flow-root 9)column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。
块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。
看到这的我表示理解无能，只好去找一下张鑫旭的文章看看：
BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。啪啦啪啦特性什么的，一言难尽，大家可以自行去查找，我这里不详述，免得乱了主次，总之，记住这么一句话：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免margin穿透啊，清除浮动什么的也好理解了。
于是我又去查阅了相关资料，最终整理如下，如有纰漏欢迎指正。
BFC的作用这个世界上有许多不能通过文字去定义的东西，如椅子，笔之类的，那我们是如何让别人知道我们在说什么呢？我们是通过描述它的主要功能来形容它的，例如椅子可以用来放东西可以用来坐，笔可以用来写等，BFC也是如此。既然我们不能通过文字准确描述它，那我们就通过其功能来概述一下，那它到底有什么用呢？
父元素管子元素
显而易见，子元素浮动之后父元素是包不住子元素的，也就是管不住了，那为了能管住它，我们可以在以下代码任选其一增加：
1)增加浮动
.parent{
float:left;
}
2)绝对定位元素
.parent{
position:absolute;
}
3)非块盒的块容器（如，inline-block，table-cell和table-caption 等）
.parent{
display:inline-block;
//display:table-cell;
//display:table-caption;
}
以上几种做法效果如图：
4)"overflow"不为"visible"的块盒
.parent{
overflow:auto;
}
5)display:flow-root（仅仅触发BFC，不给元素增加额外的功能）
.parent{
display:flow-root;
}
效果如图：
就这样，我们在无形之中已经形成了BFC。
2.合并margin
按照我们的思路来看，两个child盒子之间的margin应该为20px，但是你会发现，由于触发了BFC，margin会被合并，如图：
⚠️特别注意的是，如果触发了BFC的父元素里包含了子元素和后代元素（也可以简单理解为孙子以及更往后的元素），而子元素刚好也触发了BFC，父元素是管不住后代元素的。
3.子元素之间互不影响
12345678
你会发现，child2的文字由于child1盒子所以没办法从最左端开始，这样两个盒子之间互相影响是我们不希望的，这时候只要我们触发BFC就能解决这个问题，如新增：
.child2{
overflow:auto;
}
效果如图：
说了这么久，BFC到底是什么？每个人的理解都不一样，但是我们也不必强求去用文字描述清楚，理解能用便可。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116150.html
摘要：半年之前，我是一个前端小小小白。好多啊废话不多说，我们开始吧吭哧吭哧吭哧经过半年的准备，我成功面试进了所以相信自己，从现在开始你应该比我厉害吧我看到很多像我之前一样迷茫的人，我觉得我的经历是可以复制的。 先介绍下背景 非211，985本科毕业。一年半PHP经验，一年半前端经验，前端一直在做React开发。 半年之前，我是一个前端小小小白。多么小白呢？ css调样式全靠试。 盒模型，...
摘要：半年之前，我是一个前端小小小白。好多啊废话不多说，我们开始吧吭哧吭哧吭哧经过半年的准备，我成功面试进了所以相信自己，从现在开始你应该比我厉害吧我看到很多像我之前一样迷茫的人，我觉得我的经历是可以复制的。 先介绍下背景 非211，985本科毕业。一年半PHP经验，一年半前端经验，前端一直在做React开发。 半年之前，我是一个前端小小小白。多么小白呢？ css调样式全靠试。 盒模型，...
摘要：半年之前，我是一个前端小小小白。好多啊废话不多说，我们开始吧吭哧吭哧吭哧经过半年的准备，我成功面试进了所以相信自己，从现在开始你应该比我厉害吧我看到很多像我之前一样迷茫的人，我觉得我的经历是可以复制的。 先介绍下背景 非211，985本科毕业。一年半PHP经验，一年半前端经验，前端一直在做React开发。 半年之前，我是一个前端小小小白。多么小白呢？ css调样式全靠试。 盒模型，...
摘要：看上面的例子我们也能看出来，实际上一个内联元素是有两个高度的高度实际渲染的那个高度和高度实际区域占空间的高度也就是。 前言 总括： 本文通过实例讲解CSS中最大的难点之一，行内元素的布局，主要是挖掘line-height和vertical-align两个属性在布局方面的使用。 原文博客地址：深入理解行内元素的布局 知乎专栏&&简书专题：前端进击者（知乎）&&前端进击者（简书） 博...
摘要：看上面的例子我们也能看出来，实际上一个内联元素是有两个高度的高度实际渲染的那个高度和高度实际区域占空间的高度也就是。 前言 总括： 本文通过实例讲解CSS中最大的难点之一，行内元素的布局，主要是挖掘line-height和vertical-align两个属性在布局方面的使用。 原文博客地址：深入理解行内元素的布局 知乎专栏&&简书专题：前端进击者（知乎）&&前端进击者（简书） 博...
阅读 1312·2023-04-26 03:05
阅读 763·2021-10-19 11:43
阅读 3209·2021-09-26 09:55
阅读 828·2019-08-30 15:56
阅读 983·2019-08-30 15:44
阅读 1231·2019-08-30 15:44
阅读 2718·2019-08-30 14:23
阅读 3235·2019-08-30 13:13
