摘要：一的概念规范解释块格式化上下文，是页面的可视化渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。我们可以使用实现清除浮动，这里就不多介绍了，想要了解的可以阅读前端面试题清除浮动。
一、BFC 的概念 1.规范解释
块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。2.通俗理解
BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品。
如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。
浮动元素会创建 BFC，则浮动元素内部子元素主要受该浮动元素影响，所以两个浮动元素之间是互不影响的。
二、创建 BFC根元素或包含根元素的元素
浮动元素 float ＝ left | right 或 inherit（≠ none）
绝对定位元素 position ＝ absolute 或 fixed
display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption
overflow ＝ hidden | auto 或 scroll (≠ visible)
三、BFC 的特性BFC 是一个独立的容器，容器内子元素不会影响容器外的元素。反之亦如此。
盒子从顶端开始垂直地一个接一个地排列，盒子之间垂直的间距是由 margin 决定的。
在同一个 BFC 中，两个相邻的块级盒子的垂直外边距会发生重叠。
BFC 区域不会和 float box 发生重叠。
BFC 能够识别并包含浮动元素，当计算其区域的高度时，浮动元素也可以参与计算了。
四、BFC 的作用 1.包含浮动元素（清除浮动）浮动元素会脱离文档流(绝对定位元素也会脱离文档流)，导致无法计算准确的高度，这种问题称为高度塌陷。
解决高度塌陷问题的前提是能够识别并包含浮动元素，也就是清除浮动。
问题举例：如上左图所示，容器（container）没有高度或者 height = auto ,并且其子元素（sibling）是浮动元素，所以该容器的高度是不会被撑开的，即高度塌陷。
解决方法：在容器（container）中创建 BFC。
HTML
CSS
.container {
overflow: hidden; /* creates block formatting context */
background-color: green;
}
.container .Sibling {
float: left;
margin: 10px;
background-color: lightgreen;
}
特别提示：
通过 overflow:hidden 创建 BFC，固然可以解决高度塌陷的问题，但是大范围应用在布局上肯定不是最合适的，毕竟 overflow:hidden 会造成溢出隐藏的问题，尤其是与 JS 的交互效果会有影响。
我们可以使用 clearfix 实现清除浮动，这里就不多介绍了，想要了解的可以阅读前端面试题-clearfix（清除浮动）。
2.导致外边距折叠相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的垂直边距相遇时， 它们将形成一个外边距。这个外边距的高度等于两个发生折叠的外边距的高度中的较大者。
HTML
Sibling 1
Sibling 2
CSS
.Container {
background-color: red;
overflow: hidden; /* creates a block formatting context */
}
p {
background-color: lightgreen;
margin: 10px 0;
}
如上图所示：红色盒子（Container）中包含两个绿色的兄弟元素（P），并且红色盒子设置 overflow: hidden; 则一个BFC 已经被创建,即导致外边距折叠。
理论上两个兄弟元素之间的边距应该是两个元素的边距之和（20px），但实际是 10px。这就是外边距折叠导致的。
2.1 折叠外边距的值
两个相邻的外边距都是 正数 时，折叠外边距是两者中较大的值。
两个相邻的外边距都是 负数 时，折叠外边距是两者中绝对值较大的值。
两个相邻的外边距是 一正一负 时，折叠外边距是两者相加的和。
2.2 外边距折叠的条件是 margin 必须相邻!
3.避免外边距折叠这一听起来可能有些困惑，因为我们在前面讨论了 BFC 导致外边距折叠的问题。但我们必须记住的是外边距折叠（Margin collapsing）只会发生在属于同一BFC的块级元素之间。如果它们属于不同的 BFC，它们之间的外边距则不会折叠。所以通过创建一个不同的 BFC ，就可以避免外边距折叠。
修改前面的例子并添加第三个兄弟元素，CSS不变。
HTML
Sibling 1
Sibling 2
Sibling 3
结果不会改变，还会折叠外边距，三个兄弟元素（P）将会以垂直距离为 10px 的距离分开。原因是三个兄弟元素都属于同一个 BFC。
创建一个不同的 BFC ，就可以避免外边距折叠。
HTML
Sibling 1
Sibling 2
Sibling 3
CSS
.Container {
background-color: red;
overflow: hidden; /* creates a block formatting context */
}
p {
background-color: lightgreen;
margin: 10px 0;
}
.newBFC {
overflow: hidden; /* creates new block formatting context */
}
当第二和第三个兄弟元素属于不同的 BFC 时，它们之间就没有外边距折叠。
阅读更多
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115774.html
摘要：一的概念规范解释块格式化上下文，是页面的可视化渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。我们可以使用实现清除浮动，这里就不多介绍了，想要了解的可以阅读前端面试题清除浮动。 一、BFC 的概念 1.规范解释 块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的...
摘要：默认值，没有定位，元素出现在正常的文档流中。生成粘性定位的元素，容器的位置根据正常文档流计算得出。和属性的异同共同点对内联元素设置和属性，可以让元素脱离文档流，并且可以设置其宽高。 position的值， relative和absolute分别是相对于谁进行定位的？ 、relative:相对定位，相对于自己本身在正常文档流中的位置进行定位。、absolute:生成绝对定位，相对于最近一...
摘要：前言届校招陆陆续续开始了，整理了一些高频的面试题。标签提供给页面的一些元信息名称值对，有助于。开启缺点一个是不支持，另一个是一旦子元素的大小超过父容器的大小，就会出显示问题。用于设置或检索元素的缩放比例，值为即使用元素的实际尺寸。 前言 2019届校招陆陆续续开始了，整理了一些高频的面试题。 HTML部分 1. 什么是？ DOCTYPE是html5标准网页声明，且必须声明在HTML文档...
摘要：前言届校招陆陆续续开始了，整理了一些高频的面试题。标签提供给页面的一些元信息名称值对，有助于。开启缺点一个是不支持，另一个是一旦子元素的大小超过父容器的大小，就会出显示问题。用于设置或检索元素的缩放比例，值为即使用元素的实际尺寸。 前言 2019届校招陆陆续续开始了，整理了一些高频的面试题。 HTML部分 1. 什么是？ DOCTYPE是html5标准网页声明，且必须声明在HTML文档...
摘要：一选择器作用选择器用于定位我们想要给予样式的元素，但不只是在中，对的选择器也是支持的，比如。在选被元素后插入内容其用法和特性与相似。所有伪元素选择器在前端面试题伪类和伪元素扩展阅读前端面试题清除浮动前端面试题块格式化上下文 一、CSS选择器作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素，但不只是在 CSS 中，JavaScript 对 CSS 的选择器也是支持的，比如 ...
阅读 2936·2023-04-25 17:46
阅读 3560·2021-11-25 09:43
阅读 1044·2021-11-18 10:02
阅读 3025·2021-10-14 09:43
阅读 2731·2021-10-13 09:40
阅读 1507·2021-09-28 09:35
阅读 2142·2019-08-30 15:52
阅读 3120·2019-08-30 14:06
