关于CSS中重要的BFC详解

本文我们主要和大家分享关于css中重要的bfc详解，css中有个重要的概念bfc，搞懂bfc可以让我们理解css中某些原本诡异(??)的地方。

1. 简介

在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种。而普通流其实就是指BFC中的FC。FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC，还有GFC和FFC。

BFC(Block Formatting Context)块级格式化上下文，是用于布局块级盒子的一块渲染区域，或者说是在一定条件下的一种渲染规则。

MDN上的解释：BFC是Web页面的可视化CSS渲染的部分，是块级盒布局发生的区域，也是浮动元素与其他元素交互的区域。

2. BFC触发方式

1. 根元素，即HTML标签

   立即学习“前端免费学习笔记（深入）”；

2. float的值不为 none，为 left、right

3. overflow值不为 visible，为 auto、scroll、hidden

4. display值为 inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid

5. position值为 absolute、fixed

注意：display:table也可以生成BFC的原因在于Table会默认生成一个匿名的table-cell，是这个匿名的table-ccell生成了BFC。

3. 约束规则

浏览器对BFC区域的约束规则：

1. 生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素的外边距会折叠(Mastering margin collapsing)。

2. 生成BFC元素的子元素中，每一个子元素左外边距与包含块的左边界相接触（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。

规则解读：

1. 内部的Box会在垂直方向上一个接一个的放置

2. 内部的Box垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生折叠，不同BFC不会发生折叠。）

   

   《PHP设计模式指南》中文版

   《PHP设计模式》首先介绍了设计模式，讲述了设计模式的使用及重要性，并且详细说明了应用设计模式的场合。接下来，本书通过代码示例介绍了许多设计模式。最后，本书通过全面深入的案例分析说明了如何使用设计模式来计划新的应用程序，如何采用PHP语言编写这些模式，以及如何使用书中介绍的设计模式修正和重构已有的代码块。作者采用专业的、便于使用的格式来介绍相关的概念，自学成才的编程人员与经过更多正规培训的编程人员

   下载

3. 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）

4. BFC的区域不会与float的元素区域重叠

5. 计算BFC的高度时，浮动子元素也参与计算

4. 作用

BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。我们可以利用BFC的这个特性来做很多事。

4.1 阻止元素被浮动元素覆盖

一个正常文档流的block元素可能被一个float元素覆盖，挤占正常文档流，因此可以设置一个元素的float、display、position值等方式触发BFC，以阻止被浮动盒子覆盖。
查看DEMO

4.2 可以包含浮动元素

通过改变包含浮动子元素的父盒子的属性值，触发BFC，以此来包含子元素的浮动盒子。
查看DEMO

4.3 阻止相邻元素的margin合并

属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠，(设置writing-mode:tb-rl时，水平margin会发生重叠)。所以当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠。
这里给任一个相邻块级盒子的外面包一个p，通过改变此p的属性使两个原盒子分属于两个不同的BFC，以此来阻止margin重叠。

查看DEMO

但是这里有个疑问：
如果外面包一层p，设置能触发BFC的任何属性都能阻止相邻元素的margin合并。因为分属不同BFC不会发生margin合并。
而如果在外面不包一个p的话，当设置display为inline-block、inline-flex、table-captain，和position为absolute、fixed，float为left、right是可以阻止margin合并的。这里问题来了：

我们知道设置position和float会让元素脱离文档流并且又创建新的BFC，所以两个元素就不是相邻元素了，因此可以阻止相邻元素margin合并，但是inline-block、inline-flex、inline-grid、table-captain为什么可以呢？如果有人知道为什么，请告知~

相关推荐：

CSS中潜藏着的BFC

什么是BFC？对bfc的简单理解

浮动的定义与浮动的清除(BFC)