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）。
网友评论