【面试】BFC(块级格式化上下文)

1.box(盒子)

页面的基本构成元素，分为inline，block，inline-block三种类型的box.

 

2.FC(Formatting Context) 

Formatting Context是W3C规范中的一种概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

常见得Formatting Context有Block formatting context（简称BFC）和inline formatting context（简称IFC）.

 

3.BFC的定义 

Block formatting context 直译为 块级格式化上下文。是一个独立的渲染区域，只有Block-level box参与，它规定了内部的block-level box如何布局，且与这个区域的外部毫不相干。

 

4.BFC布局规则

1.   内部的box会在垂直方向，一个接一个地放置 
2.   box垂直方向的距离由margin决定。属于同一个BFC的两个相邻box的margin会发生重叠
3.   每个元素的margin box的左边，与包含块border box 的左边相接触，即使存在浮动也如此
4.   BFC的区域不会与float元素重叠（一般用来清除浮动）
5.   BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
6.   计算BFC的高度时，浮动元素也参与计算

 

BFC布局规则示例

1.内部的box会在垂直方向，一个接一个地放置： 

<!DOCTYPE h