CSS深入浅出-关于BFC

BFC导读

• 名称

英文全称：Block Formatting Context
中文名：块格式化上下文

• 在了解BFC之前，先思考一个问题：

请问：什么是色情？
联邦最高法院大法官斯图尔特更有一句名言

I know it when I see it
我们无法定义什么是色情
不过，我看了之后，就能知道它是不是

• 类似地：

1. 我不知道什么是 BFC
2. 但是你写出样式，我就知道这是不是 BFC

• BFC 就是这样的东西(堆叠上下文也是)

1. 它没有定义
2. 它只有特性/功能

BFC的特性

• BFC创建条件：

1. 根元素或其它包含它的元素
2. 浮动元素 (元素的 float 不是 none)
3. 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
4. 内联块 (元素具有 display: inline-block)
5. 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
6. 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
7. 具有overflow 且值不是 visible 的块元素，
8. display: flow-root!!无副作用!!
9. column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。

• BFC的特性

1. 在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由margin属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并
   翻译：
   在一个BFC中，子元素从BFC顶部开始，在竖直方向上一个一个地放置。
   兄弟元素之间竖直距离由margin属性决定。
   但是两个竖直margin同时出现时，会出现margin合并现象

2. 一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。
   翻译：
   一个BFC包含它内部元素的所有内容，除了被包含于新的BFC中的元素。
   举例：
   爷爷(BFC)本来是要管家里的儿子和孙子的。但如果儿子在(另一个BFC)的话，爷爷就不管孙子了，只管儿子。

BFC的功能

1. 爸爸管儿子

用 BFC 包住浮动元素
(这不是清除浮动，.clearfix 才是清除浮动）

点击查看测试

2. 兄弟之间划清界限

用 float + div 做左右自适应布局

点击查看测试

BFC面试回答

• 用代码回答，别口头解释

• 就举上面两个例子