什么是Box和Formatting Context

Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 box 组成的。 任何被渲染的元素都属于一个 box ，设置元素的display 属性，决定了这个 Box 的类型是block还是inline。

格式化上下文( Formatting Context )是决定如何渲染文档的容器，它包括:

块级格式化上下文( Block formatting context )( BFC )

行内格式化上下文( Inline formatting context ) ( IFC )

自适应格式化上下文( Flex Formatting Context )( FFC )

网格布局格式化上下文(GridLayout Formatting Context)(GFC)

不同类型的 Box， 会参与不同的Formatting Context，因此Box内的元素就会以不同的方式渲染。

二、知识剖析

让我们看看有哪些盒子：

block-level box(块级盒元素）:display 属性为 block, list-item, table 的元素、元素本身为块级元素的元素(如div），会生成 block-level box。并且参与 block fomatting context（块级格式化上下文）

inline-level box（行级盒元素）:display 属性为 inline, inline-block, inline-table 的元素、元素本身为行级元素的元素（如span），会生成 inline-level box。并且参与 inline formatting context（行级格式化上下文）；

run-in box  css3里加入的属性，在这里就不多介绍了；

BFC布局规则

1、内部的Box会在垂直方向，一个接一个地放置。

2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

3、 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

4、 BFC的区域不会与float box重叠。

5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

6、计算BFC的高度时，浮动元素也参与计算

三、常见问题

问题:有哪些方式能够触发BFC模式呢？

解决方案

1、根元素

2、float属性不为none

3、position为absolute或fixed

4、display为inline-blcok、table-cell、table-caption、flex、inline-flex

5、overflow不为visible

四、BFC的应用

1、自适应两栏布局

.aside{

width:100px;

height:150px;

float:left;

background:#f66;

}

.main{

height:200px;

background:#fcc;

}

上面中的例子我们可以看出，每个元素的margin box的左边与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此

因此，虽然存在浮动的元素，但main的左边依然会与包含块的左边相接触。

为main加入触发BFC的条件overflow：hidden，就可以实现两栏布局了。

2、清除内部浮动

.par{

overflow:hidden;

border:5px solid#fcc;

width:300px;

}

.child{

border:5px solid#f66;

width:100px;

height:100px;

float:left;

}

根据BFC布局规则第六条：计算BFC的高度时，浮动元素也参与计算

为了清除内部浮动，我们可以触发.par生成BFC，那么.par在计算高度时，.par内部的浮动元素也会参与计算.

3、防止margin重叠

.top{

display:inline-block;

width:100px;

height:100px;

margin:50px;

background:#fcc;

}

.down{

width:100px;

height:100px;

margin:30px;

background:#fcc;

}

这个例子让top或者down任意一个触发BFC，就可以防止垂直方向上的margin重叠。