BFC详解

BFC基本认识：

　　在学习BFC之前，我们有必要清除了解BFC到底是什么东东。BFC，中文名字叫做“块级格式化上下文”，英文是“block formatting content”，所以我们要在block、formatting content两方面来认识BFC。

1.box

　　说到block，那么我们首先需要认识css中的box，总所周知，box是css中重要的一个布局基本单位，直观来说一个网页的组成是由众多的box组成的。元素的类型和display属性有关；不同类型的box，会参与不同的formatting content（一个决定如何渲染文档的容器），因此box中的元素会以不同的方式进行渲染。而我们所知道的元素类型基本分为如下三种类型：block-level 块级元素、inline-block-level 行内块元素，inline-level 行内元素。我们主要看盒子：

1. block-level box：块级元素盒子；display属性的值为：block、list-item、table 的元素，会生成block-level box，并且参与block formatting content。
2. inline-level box：行内块元素盒子；display属性值为：inline-block、inline、inline-table的元素，会生成inline-block box，并且参与block formatting content。
3. run-in box： 这是C3才有，现在不讨论，因为基本不会使用到。

2.formatting content

　　Formatting content是W3C CSS2.1 规范中的一个概念，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的Formatting content有Block formatting content（简称BFC）和inline formatting content（简称IFC）。

　　CSS2.1中只有BFC和IFC，CSS3中还增减了GFC和FFC。

3.BFC定义

　　BFC（Block formatting content）直译为“块级格式化上下文”。它是一个独立的渲染区域，只有block-level box 参与，它规定了内部的block-level box如何布局，并且与这个区域外部毫不相干。

　　官方解析：BFC是W3C CSS2.1 规范中的一个概念，它决定了元素如何对齐内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，block formatting content 提供了一个环境，HTML元素在这个环境中按照一定的规则进行布局。一个环境中的元素不会影响到其他环境中的布局。不如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素的影响，两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思，也可以说BFC就是一个作用范围。可以把它理解成一个独立的容器，并且这个容器里面的box布局，与这个容器外的毫不相干。

　　另外一种通俗的解释是：在普通流中的box属于一种formatting content，类型可以是block或者是inline，但不能同时属于两者。并且，block boxes（块框）在block formatting content 里格式化，inline boxes（块内框）则在inline formatting content里格式化。任何被渲染的元素都属于一个box，并且不是block，就是inline。即使是未被任何元素包裹的文本，根据不同的情况，也会属于匿名的block boxes或者inline boxes。所以上面的描述，即是把所有的元素划分到对应的formatting content里。

4.BFC的布局规则

• 内部的box会在垂直方向上，一个接一个地放置
• box垂直方向的距离由margin决定，属于同一个BFC的两个相邻的box的margin会发生重叠。
• 每个元素的margin-box的左边，与包含块border-box的左边相接触（对于从左到右的格式化，否则相反）。即使存在浮动也是如此。
• BFC的区域不会与float box重叠。（在移动端开发中，常用这个特性来实现两个box左右排列）

关于这几天规则的几点说明：

• 当容器有足够的剩余空间容纳BFC的宽度时所有浏览器都会将BFC放置在浮动元素所在行的剩余空间内。
• 当BFC的宽度大于容器剩余宽度时，最新版本的浏览器中只有firefox会在同一行显示，其他浏览器均换行。
• 利用BFC和float实现两栏自适应时，触发BFC的盒子不需要设置宽度，它会自动占满余下的所有空间。
• 在第三条的规则之下，如果你希望实现三栏自适应，那么你需要先将左右浮动的盒子设置好，然后再方触发BFC的盒子，不然由于BFC盒子默认占满余下的空间，导致第三个浮动的盒子被强制换行。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
• 计算BFC的高度是，浮动元素也参与计算。

哪些元素会生成BFC

• 根元素
• float属性部位none
• position为absolute或fixed
• display为inline-block、table-cell、table-caption、Flex、inline-Flex
• overflow部位visible