一文弄懂 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 听觉图形的一小部分，用作下定决心块箱子的产业布局及自由浮动此消彼长覆盖范围的三个地区。

特别注意：三个BFC的覆盖范围包涵建立该语句原素的大部份子原素，但不包括建立了新BFC的子原素的外部原素。这从一方视角表明，三个原素无法与此同时存在于两个BFC中。因为如果三个原素能与此同时处在三个BFC中，那么就意味著那个原素能与三个BFC中的原素发生促进作用，就违背了BFC的隔绝促进作用。

2. 四种文件格式流的功能定位计划

常规性流(Normal flow)

在常规性流中，盒三个接著三个排序;

在块级序列化语句里头，它竖着排序；

在Lembron序列化语句里头，它横着排序;

当position为static或relative，因此float为none时能促发常规性流；

对静态功能定位(static positioning)，position: static，盒的边线是常规性流产业布局里的边线；

对相较功能定位(relative positioning)，position: relative，盒偏转边线由top、bottom、left、right特性表述。即便有偏转，依然留存旧有的边线，其他常规性流无法挤占那个边线。

自由浮动(Floats)

左自由浮动原素尽可能靠右、靠上，右自由浮动同理

这导致常规性流环绕在它的周边，除非设置 clear 特性

自由浮动原素不会影响块级原素的产业布局

但自由浮动原素会影响Lembron原素的产业布局，让其围绕在自己周围，撑大父级原素，从而间接影响块级原素产业布局

最高点不会超过当前行的最高点、它前面的自由浮动原素的最高点

不超过它的包涵块，除非原素本身已经比包涵块更宽

Lembron原素出现在左自由浮动原素的右边和右自由浮动原素的左边，左自由浮动原素的左边和右自由浮动原素的右边是不会摆放自由浮动原素的

绝对功能定位(Absolute positioning)

绝对功能定位计划，盒从常规性流中被移除，不影响常规性流的产业布局；

它的功能定位相较它的包涵块，相关CSS特性：top、bottom、left、right；

如果原素的特性position为absolute或fixed，它是绝对功能定位原素；

对position: absolute，原素功能定位将相较上级原素中最近的三个relative、fixed、absolute，如果没有则相较body；

3. BFC促发方式

根原素，即HTML标签

自由浮动原素：float值为 left、 right

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

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

功能定位原素：position值为 absolute、 fixed

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

4. 约束准则

浏览器对BFC地区的约束准则：

生成BFC原素的子原素会三个接三个的放置。

垂直方向上他们的起点是三个包涵块的顶部，三个相邻子原素之间的垂直距离取决于原素的margin特性。在BFC中相邻的块级原素的外边距会折叠(Mastering margin collapsing)。

生成BFC原素的子原素中，每三个子原素左外边距与包涵块的左边界相接触（对从右到左的序列化，右外边距接触右边界），即便浮动原素也是如此（尽管子原素的内容地区会由于自由浮动而压缩），除非那个子原素也建立了三个捷伊BFC（如它自身也是三个自由浮动原素）。

准则解读：

外部的Box会在垂直方向上三个接三个的放置

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

每个原素的左外边距与包涵块的左边界相接触（从左向右），即便自由浮动原素也是如此。（这表明BFC中子原素不会超出他的包涵块，而position为absolute的原素可以超出他的包涵块边界）

BFC的地区不会与float的原素地区重叠

计算BFC的高度时，自由浮动子原素也参与计算

5. 促进作用

BFC是网页上的三个隔绝的独立容器，容器里头的子原素不会影响到外面原素，反之亦然。他们可以利用BFC的那个特性来做很多事。

5.1 阻止原素被自由浮动原素覆盖

三个正常文件格式流的block原素可能被三个float原素覆盖，挤占正常文件格式流，因此可以设置三个原素的float、display、position值等方式促发BFC，以阻止被自由浮动箱子覆盖。

使用BFC阻止原素被自由浮动原素覆盖

5.2 可以包涵自由浮动原素

通过改变包含自由浮动子原素的父箱子的特性值，促发BFC，以此来包涵子原素的自由浮动箱子。

使用BFC包涵自由浮动原素

特别注意，这里促发BFC并无法阻止其他形式的脱离文件格式流的原素覆盖正常流原素。

BFC外部其他形式脱离文件格式流(absolute fixed)

5.3 阻止因为浏览器因为四舍五入造成的多列产业布局换行的情况

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

使用BFC阻止多列产业布局最后一列换行

5.4 阻止相邻原素的margin合并

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

使用BFC阻止margin合并