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就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
• 计算BFC的高度是，浮动元素也参与计算。

哪些元素会生成BFC

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