BFC原理解析

BFC

BFC（Block Formatting Contexts），块级格式化上下文

盒模型

CSS 盒模型描述了通过 文档树中的元素 以及相应的 视觉格式化模型 所生成的矩形盒子。简单来说，盒模型定义了一个 矩形盒子，当我们需要对文档进行布局时，浏览器的渲染引擎就会根据盒模型，将所有元素表示为一个个矩形的盒子，盒子的外观由 CSS 决定。

一个标准的盒子由四个部分组成，由内向外分别为：内容，内边距，边框，外边距：

标准的盒模型中，内容区域的大小可以明确地通过width，min-width，max-width，height，min-height，max-height控制，也就是说，通过CSS设置的元素宽高只是包含内容区域。你可能听说过怪异盒模型，这种盒模型最早在IE浏览器中出现，也叫IE盒模型，box-sizing属性值为border-box时，元素会呈现怪异盒模型，此时，元素的宽高包含了内容，内边距和边框。

视觉格式化模型

CSS视觉格式化模型描述了盒子是怎样生成的，简单来说，它定义了盒子生成的计算规则，通过规则将文档元素转换为一个个盒子。

每个盒子的布局由尺寸，类型，定位，盒子的子元素或兄弟元素，视口的尺寸和位置等因素决定。

视觉格式化模型的计算，取决于一个矩形的边界，这个边界，就是包含块( containing block )：

<table>

     <tr>

        <td></td>

      </tr>

</table>

上述代码中，table和tr都是包含块，table是tr的包含块，同时tr又是td的包含块。

盒子不受包含块的限制，当盒子的布局跑到包含块的外面时，就是我们说的溢出（overflow）。

视觉格式化模型定义了盒（Box）的生成，其中的盒主要包括了块级盒,行内盒和匿名盒。

块级元素

CSS 属性值 display 为 block，list-item，table 的元素。

块级盒

块级盒具有以下特性：

CSS属性值display为block，list-item，table时，它就是块级元素

视觉上，块级盒呈现为竖直排列的块

每个块级盒都会参与BFC的创建

每个块级元素都会至少生成一个块级盒，称为主块级盒；一些元素可能会生成额外的块级盒，比如<li>，用来存放项目符号

行内级元素

CSS 属性值 display 为 inline，inline-block，inline-table 的元素。

行内盒

行内盒具有以下特性：

CSS属性值display为inline，inline-block，inline-table时，它就是行内级元素

视觉上，行内盒与其他行内级元素排列为多行

所有的可替换元素（display值为inline，如<img>，<iframe>，<video>，<embed>等）生成的盒都是行内盒，它们会参与IFC（行内格式化上下文）的创建

所有的非可替换行内元素（display值为inline-block或inline-table）生成的盒称为原子行内级盒，不参与IFC创建。

匿名盒

匿名盒指不能被 CSS 选择器选中的盒子，比如：

<div>

  匿名盒1

  <p>块盒</p>

  匿名盒2

</div>

上述代码片段中，div 元素和 p 元素都会生成一个块级盒，p 元素的前后会生成两个匿名盒。

匿名盒所有可继承的 CSS 属性值都为 inherit，所有不可继承的 CSS 属性值都为 initial。

定位方案

CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流（普通流）、周边元素、父容器或者主视口/窗口的位置。技术布局从宏观上来说是受定位方案影响，定位方案包括普通流（Normal Flow，也叫常规流，正常布局流），浮动（Float），定位技术（Position）。