乐趣区

关于css3:和面试官谈谈BFC

jiezi

什么是 BFC

首先，什么是 FC，FC 的全称是 Formating Context（格式化上下文）。元素在规范流外面都是一个 FC，例如 div,p 标签等都是属于一个 FC。

看一下 W3c 的文档对规范流和 formatting context 的解释

9.4 Normal flow

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.

简而言之

  • 块级元素的布局是属于 BFC(Block Formatting Context)
  • 行内级元素的布局是属于 IFC(Inline Formatting Context)

那么咱们能够了解为，块级元素布局的上下文环境就是 BFC, 它就是一个大箱子，与外部环境隔离

造成 BFC 条件（间接照搬 MDN）

创立新的块格局上下文

<html> 元素不是惟一可能创立块格局上下文的元素。任何块级元素都能够通过利用某些 CSS 属性来创立一个 BFC

除了文档的根元素 (<html>) 之外，还将在以下状况下创立一个新的 BFC：

  • 应用 float 使其浮动的元素
  • 相对定位的元素 (蕴含 position: fixed 或 position: sticky
  • 应用以下属性的元素 display: inline-block
  • 表格单元格或应用 display: table-cell, 包含应用 display: table-* 属性的所有表格单元格
  • 表格题目或应用 display: table-caption 的元素
  • 块级元素的 overflow 属性不为 visible
  • 元素属性为 display: flow-root 或 display: flow-root list-item
  • 元素属性为 contain: layout, content, 或 strict
  • flex items
  • 网格布局元素
  • multicol containers
  • 元素属性 column-span 设置为 all

总结一下：html 是一个 BFC, 然而 body 不是一个 BFC，overflow 属性除了 visible 外都是一个 BFC

BFC 的作用

9.4.1 [Block formatting contexts]()

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

简略概述如下

  • 在 BFC 中,box 会在垂直方向上一个挨着一个排布 

     难怪块级元素会独占一行，原来是 BFC 的作用
  • 垂直方向上的间距由 margin 属性决定
  • 在同一个 BFC 中，相邻两个 box 之间的 margin 会折叠

  • 在 BFC 中，每一个元素的左边缘是紧挨着蕴含块的左边缘的 

                       
刚刚咱们说 html 也是一个 BFC，当初大家晓得页面布局的时候为什么都会默认靠左对齐了吧

那这个货色有什么用呢

  • 解决 margin 折叠问题 

     咱们能够造成两个不同的 BFC，因为只有在同一个 BFC 中，相邻两个 box 之间的 margin 会折叠

  • 解决浮动高度塌陷问题 

      
 BFC 解决高度塌陷须要满足两个条件
     1. 浮动的父元素触发 BFC，造成独立的块格式化上下文
     2. 浮动元素的父元素是 auto 的

    10.6.7 [‘Auto’ heights for block formatting context roots]()

In certain cases (see, e.g., sections 10.6.4 and 10.6.6 above), the height of an element that establishes a block formatting context is computed as follows:

If it only has inline-level children, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box.

If it has block-level children, the height is the distance between the top margin-edge of the topmost block-level child box and the bottom margin-edge of the bottommost block-level child box.

Absolutely positioned children are ignored, and relatively positioned boxes are considered without their offset. Note that the child box may be an anonymous block box.

In addition, if the element has any floating descendants whose bottom margin edge is below the element’s bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.

BFC 的高度是 auto 的状况下，是如下办法计算高度的

1. 如果只有 inline-level, 是行高的顶部和底部的间隔

2. 如果有 block-level，是由最底层的块上边缘和最底层块的下边缘之间的间隔

3. 如果有相对定位元素，将被疏忽

4. 如果有浮动的元素，那么会减少高度以包含这些浮动元素的下边缘

网上也有很多 BFC 的例子，我就不写拉，有人看再补充点小例子

退出移动版