浅谈BFC

发表于   |     |   阅读次数

摘要：BFC，这个词很久之前就已经听说过，知道是块级格式上下文，其他的就不清楚了。这段时间看了一些关于BFC的文章之后，对于BFC也有所认识，跟大家分享一下我对BFC的理解。

视觉格式化模型

在谈BFC之前先介绍一下视觉格式化模型

定义：视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制。这是 CSS 的一个基础概念。 视觉格式化模型根据 CSS 盒模型为文档的每个元素生成 0，1 或多个盒。

盒的渲染是相对于它的包含块（后代元素）边界的渲染，当布局跑到 包含块的外面时，则出现了溢出（overflow）。

盒类型

视觉格式化模型的一部分工作是从文档元素生成盒。生成盒的类型由display决定。

1.块盒

display为block,table,list-item

  1. 视觉上成块，竖着排列
  2. 参与块级格式上下文（BFC）

2.行内盒

display为inline,inline-block,inline-table

  1. 视觉上与其他行内元素上排列成行，横着排列
  2. 参与行内格式上下文（IFC）

3.匿名盒

  1. 不能被选择器选中
  2. 属性都是继承的或者初始默认值

定位方案

定位方案的基本单位是盒，在了解BFC之前，我们先介绍定位方案以便我们后面 更好的理解BFC。

1.常规流

  1. 盒子一个接一个排列，在BFC中竖着排，在IFC中横着排
  2. position为static或relative会触发常规流
  3. float为none时会触发常规流

2.浮动

  1. float不为none时会造成浮动
  2. 脱离常规流，造成父元素塌陷，除非除浮动
  3. 其他常规流围绕在它周边

3.绝对定位

  1. position为abbsolute或fixed会造成绝对定位
  2. 脱离常规流，对常规流没有影响
  3. 定位相对于其他块

BFC

现在，我们对盒类型和定位方案有一定理解，接下来，我们就来说说BFC到底是什么。

什么是BFC

首先我们来看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.
块级格式上下文是CSS渲染的一部分。决定块盒的布局以及浮动的相互影响。

如何创建BFC

那么如果我们要使用BFC，我们要怎么做呢？首先要创建BFC。我们来看一下MDN怎么解释。

the root element or something that contains it
floats (elements where float is not none)
absolutely positioned elements (elements where position is absolute or fixed)
inline-blocks (elements with display: inline-block)
table cells (elements with display: table-cell, which is the default for HTML table cells)
table captions (elements with display: table-caption, which is the default for HTML table captions)
elements where overflow has a value other than visible
flex boxes (elements with display: flex or inline-flex)

其实，我们刚才在说盒类型的时候，就有提到过，现在我们来看看MDN的解，其实看关键字基本就知道了。

  1. 根元素或者包含根元素的元素
  2. float不为none的元素
  3. position为absolute或fixed的元素
  4. display: inline-block的元素
  5. display: table-cell的元素
  6. display: table-caption的元素
  7. overflow不为visible的元素
  8. flex box弹性盒子（CSS3）

BFC的边界

在我们以前的编程习惯中，看到这里大概会以为一个元素可以在多个BFC中，其实并不是。看看这里的解释。

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.
一个BFC包含创建该上下文的所有子元素，但是不包括创建BFC的子元素的所有子元素。这句话说明了一个点，就是一个元素只能存在你一个BFC中。

BFC的特性

  1. BFC内部元素一个一个竖着排列
  2. BFC内部与外部是隔绝的，不相互影响
  3. 每个元素的margin box左边与容器的border box左边相接触
  4. BFC的高度包含浮动元素，不会造父元素塌陷

了解了BFC之后，我们就可以利用BFC进行布局，而且对整个布局的理解更加深刻~

参考：
视觉格式化模型|MDN
Block formatting context|MDN