BFC

概述

BFC 全称 block formatting context ，即格式化上下文 ，是 css 渲染中的重要组成。

视觉格式化模型

视觉格式化模型是一种视觉媒体渲染机制。

浏览器将 html 与 css 进行解析后形成渲染树 ，再由渲染树将数据展现为视图。

所有页面上的视图元素都是一个盒模型 ，也即为常说的一切模型皆盒子。

视觉格式化模型定义了盒子生成。

盒模型将决定了元素大小、颜色等具体视觉效果，也可以影响周边盒子相关属性的计算。

盒类型根据 display 属性决定，分为:
块盒、
行内盒、
匿名盒(没有名字，不能被选择器选中)、
一些实验性盒子(未添加到规范中)。

块盒

• 当元素 display 为 block、 list-item 、table 时，则为块级元素，block-level。
• 在视觉上呈现为块，竖直排列。
• 块级盒参与(块格式化上下文)。
• 每个块级元素至少生成一个块级盒，成为主要块级盒。一些元素，比如 li 额外生成盒子放置项目的符号。

行内盒

• 当元素的 display 为 inline 、inline-block、 inline-table 则为行内元素。
• 视觉上他将内容和其他行内元素排位多行，比如段落文章、文本、图片。
• 行内元素生成行内盒，参与行内格式上下文。同时参与生成行内格式化上下文的行内级盒成为行内盒。 所有 display 为 inline 为非替换元素生成的盒就是行内盒。
• 不参与生成行内格式化上下文的行内级盒成为原子行内级盒。这些盒由可替换行内元素或 display 为 inline-block 或 inline-table 的元素生成，不能拆分多个盒。

匿名盒

• 也分匿名块盒与匿名行内盒，匿名盒没有名字，不能用选择器选择，所有属性都是 inherit 或初始值。

三种定位方案:

在定位的时候，浏览器根据元素的盒类型和上下文进行元素定位。

1. 常规流

• 常规流中，盒子一个接一个排列。
• 块级格式上下文，他们竖着排列。
• 行内格式化上下文，他们横着排列。
• 当 float 为 none， position 为 static 或 relative 时，触发常规流。
• 当 position 为 static 时，盒子位置为常规流的位置。
• 当 position 为 relative， 盒子根据 top，left 属性偏移。即使偏移，其他正常流不占这个位置。

2. 浮动

• 浮动盒子。
• 位于当前行的头部或尾部。
• 这导致常规流会绕在她的周围， 除非设置 clear 属性。

3. 绝对定位

• 当 position 为 fixed 或 absolute 时，才为绝对定位。
• 绝对定位方案中，盒从常规流移除，不影响正常流布局。
• 相关属性 top、left、bottom、right。
• fixed 相对视口定位，absolute 相对于最近的 relative、fixed、absolute 的祖代元素定位，没有则相对于 body。

BFC 的效果

格式化上下文即是指决定盒子的布局及浮动相互影响范围的一个区域。

• BFC 最明显的效果就是建立一个隔离空间，断绝空间内外元素相互作用。
• 内部盒子垂直方向一个个排列(正常流)。
• 处于同一 BFC 的元素相互影响，可能发生 margin 、 collapse(外边距重叠)。
• 每个元素的 margin-box 的左边，跟容器快 border-box 的左边相接触。即使浮动也是如此。
• 计算 BFC 高度时，考虑 BFC 所包含的所有元素，浮动元素也计算在内。
• 浮动盒子区域不叠加在 BFC 上。

BFC 的创建方式

• 根元素和其他包含他的元素。
• 浮动 float 不为 none。
• 绝对定位 fixed 、absolute。
• 行内块 inline-block。
• 表格元素 table-cell。
• overflow 不为 visible。