什么是 Block Formatting Context (BFC)

dayday_up 发布于2019-08-20 17:36 / 3327人阅读

摘要：参考在讲之前，先来了解一下规范里面的一个关于元素的定位规则主要有三种常规文档流，浮动，绝对定位。而这些值都是相对其父元素来说的。在上面的第一点里面我们已经提到了一个概念叫。

参考：https://www.w3.org/TR/CSS21/v...
在讲BFC之前，先来了解一下CSS2.1规范里面的一个关于元素的定位规则(positioning schemes),主要有三种：常规文档流，浮动，绝对定位。
1: 常规文档流(Normal flow)：常规文档流包含三种情况：

1: 块级盒元素（block-level boxes）的块级格式(block formatting)
2: 行内盒元素(inline-level boxes)的行内格式(inline formatting)
3: 块级盒元素和行内盒元素的相对定位

2: 浮动（Floats）：

1: 第一步：先按照常规文档流的规则定位
2: 第二步：从文档流里面抽离出来，最大化地靠左或者靠右
3: 浮动的元素对后续的元素定位有影响

3: 绝对定位(Absolute positioning):

1: 绝对定位包括 "position: absolute"和"position: fixed"
2: 绝对定位的元素从文档流里面彻底地抽离出来，对后续的元素定位没有影响
3: 绝对定位的元素最终的位置取决的‘top’,"right", "bottom", "left"设置的值。而这些值都是相对其父元素来说的。

在上面的第一点里面我们已经提到了一个概念叫：block formatting。那什么又是Block Formatting Context呢？这里先看看MDN是给出的定义：

A block formatting context is a part of a visual CSS rendering of a
Web page. It is the region in which the layout of block boxes occurs
and in which floats interact with each other.

额，看完之后，我脑袋里面只有一个想法： What is that?
不如先不去追究这个概念，先来看看在哪些情况下，会创造BFC：

1：根元素
2: 浮动元素：float的值不是‘none’的元素
3: 绝对定位元素:（position: absolute 或者 position: fixed）
4: 行内块级元素:(display: inline-block)
5: 表格单元格（table cells）:（display: table-cell,也是 HTML table cells的默认值）
6: 表单标题（table captions）: (display: table-caption, 也是HTML table captions的默认值)
7: 块元素（block element）当overflow为非"visible"的其他值：auto, hidden, initial, overlay, scroll. 当overflow:inherit, 这时候取决于最终继承到的值。
8: display: flow-root的元素
9: column-span: all的元素

看完了上面产生BFC的各种情况，现在再来看看BFC到底有些什么规则：
1: 在一个块元素格式上下文（BFC）,这些盒子（boxs）从父元素（容器元素）的顶端垂直地一个接一个排列
2: 两个相邻元素的垂直间距（margin）会折叠（collapse）
3: 每一个元素的左边界紧贴着容器元素的左边界（当然这是针对从左到右排列的元素，从右到左排列的元素那就是又边界紧贴着容器元素的右边界）。

云服务器 GPU云服务器 Formatting bfc bfc布局 Context

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83716.html

BFC原理详解

摘要：最常见的有简称和简称。可以把它理解成是一个独立的容器，并且这个容器的里的布局，与这个容器外的毫不相干。根据布局规则第二条垂直方向的距离由决定。参考前端精选文摘神奇背后的原理之详解深入理解流体特性和特性下多栏自适应布局布局一.BFC是什么在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 1.BOX：CSS布局的基本单位 Box是CSS布局的...

ziwenxie 2019-08-29 11:10 评论0 收藏0
关于BFC的总结

摘要：虽然工作这么多年了，但是如果让我直接解释一下什么是的时候，还是感觉有点不知道怎么准确的表达，下面就翻翻文档，总结一下，加深一下认识吧。两个兄弟盒之间的垂直距离由属性决定。最常见的有简称和简称。虽然工作这么多年了，但是如果让我直接解释一下什么是BFC的时候，还是感觉有点不知道怎么准确的表达，下面就翻翻文档，总结一下，加深一下认识吧。大家也可以关注我的GitHub后续的更新 1.BFC...

chadLi 2019-08-29 15:27 评论0 收藏0
关于BFC的总结

摘要：虽然工作这么多年了，但是如果让我直接解释一下什么是的时候，还是感觉有点不知道怎么准确的表达，下面就翻翻文档，总结一下，加深一下认识吧。两个兄弟盒之间的垂直距离由属性决定。最常见的有简称和简称。虽然工作这么多年了，但是如果让我直接解释一下什么是BFC的时候，还是感觉有点不知道怎么准确的表达，下面就翻翻文档，总结一下，加深一下认识吧。大家也可以关注我的GitHub后续的更新 1.BFC...

oneasp 2019-08-02 10:28 评论0 收藏0
BFC与IFC概念理解+布局规则+形成方法+用处

摘要：下面就来介绍和的布局规则。布局规则原文整理为中文内部的会在垂直方向，一个接一个地放置。解决方案为加上使其形成，根据规则第六条，计算高度时就会计算的元素的高度，达到清除浮动影响的效果。并为这个外层元素设置，使其形成。想要理解BFC与IFC，首先要理解另外两个概念：Box 和 FC（即 formatting context）。 Box 一个页面是由很多个 Box 组成的，元素的类型和 d...

lbool 2019-08-29 12:39 评论0 收藏0
BFC 神奇背后的原理（转）

摘要：最常见的有简称和简称。根据布局规则第四条的区域不会与重叠。根据布局规则第二条垂直方向的距离由决定。同样的，当内部有浮动时，为了不影响外部元素的布局，计算高度时会包括浮动的高度。避免重叠也是这样的一个道理。 BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BF...

April 2019-08-29 12:56 评论0 收藏0