CSS中重要的BFC

CSS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。

创新互联服务项目包括洪洞网站建设、洪洞网站制作、洪洞网页制作以及洪洞网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，洪洞网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到洪洞省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

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

BFC (Block Formatting Context)块级格式化上下文，是用于布局块级盒子的一块渲染区域。[MDN上的解释]：BFC是Web页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。

注意：一个BFC的范围包含创建该上下文元素的所有子元素，但 不包括 创建了新BFC的子元素的内部元素。这从另一方角度说明，一个元素不能同时存在于两个BFC中。因为如果一个元素能够同时处于两个BFC中，那么就意味着这个元素能与两个BFC中的元素发生作用，就违反了BFC的隔离作用。

常规流(Normal flow)

浮动(Floats)

绝对定位(Absolute positioning)

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

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

规则解读：

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

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

[使用BFC阻止元素被浮动元素覆盖]点击预览

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

[使用BFC包含浮动元素]

注意，这里触发BFC并不能阻止其它形式的脱离文档流的元素覆盖正常流元素。

BFC内部其他形式脱离文档流(absolute fixed) 点击预览

有时候因为多列布局采用小数点位的width导致因为浏览器因为四舍五入造成的换行的情况，可以在最后一列触发BFC的形式来阻止换行的发生。比如下面栗子的特殊情况

使用BFC阻止多列布局最后一列换行 点击预览

属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠，(设置writing-mode:tb-rl时，水平margin会发生重叠)。所以当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠。

这里给任一个相邻块级盒子的外面包一个div，通过改变此div的属性使两个原盒子分属于两个不同的BFC，以此来阻止margin重叠。

使用BFC阻止margin合并 点击预览

但是这里有个 疑问 点击预览 ：

如果外面包一层div，设置能触发BFC的任何属性都能阻止相邻元素的margin合并。因为分属不同BFC不会发生margin合并。

而如果在外面不包一个div的话，当设置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

个人理解

1、BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响；

2、可以通过一些条件触发BFC，从而实现布局上的需求或解决一些问题；

3、可以将BFC想象成一个工具，无需探究其定义，只要着重理解其功能（特性）即可。

二、BFC有什么用？

BFC的触发条件

1、根元素（html）

2、float值非none

3、overflow值非visible

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

5、position值为absolute、fixed

BFC的特性

1、属于同一个BFC的两个相邻容器的上下margin会重叠（重点）

2、计算BFC高度时浮动元素也参于计算（重点）

3、BFC的区域不会与浮动容器发生重叠（重点）

4、BFC内的容器在垂直方向依次排列

5、元素的margin-left与其包含块的border-left相接触

6、BFC是独立容器，容器内部元素不会影响容器外部元素

BFC功能总结

1、可以利用BFC解决两个相邻元素的上下margin重叠问题；

2、可以利用BFC解决高度塌陷问题；

3、可以利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼等）。

CSS中的BFC及其作用

触发红色盒子的BFC，可防止被绿色盒子遮挡

把注释的任意一条打开会触发.red的BFC，让两者处于不同的BFC

绿盒子设置浮动后，父盒子高度塌陷：

盒子触发BFC可以解决这个问题

在同一个BFC中时：

分为两个不同的BFC之后：

分享题目：css样式不触发bfc,为什么css样式不生效
文章源于：http://azwzsj.com/article/dsegggc.html