FC及BFC

1.什么是FC

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

　Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：
block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
run-in box: css3 中才有。

(1)定义:它是一个独立的渲染区域,只有block-level-box参与.它规定了块级盒子内部子元素的布局.
(2)BFC常见触发条件:

1>.根元素，即HTML元素
2>.float不为none
3>.position不为static或者是relative
4>.overflow的值为hidden,auto或者scroll
5>.display的值为table-cell,table-caption或者inline-block

(3)BFC布局规则:
1>.BFC内部的盒子在垂直方向一个接一个的放置
2>.同一个BFC中相邻盒子的margin会发生合并

3>.每个元素盒子的左外边缘(margin-box)和包含它的容器的border-box接触(对于从右往左的排版则相反，是右边接触),即使存在浮动也是如此
抽象1>,2>,3>:盒子排列方式,盒子紧邻时外边距会合并,盒子嵌套时内部元素的外边距盒子和外部容器的border-box紧邻
eg:

说明:img图片的margin-box和class为first块元素的border-box的内侧接触.

4>.BFC区域不会和float-box重叠
5>.BFC是页面上一个独立的容器,它其中的子元素不会影响到外面得元素,外面得元素也不会影响到内部
6>.计算BFC的高度时,浮动元素也参与计算

简单记录顺序:独立的(5>)渲染(3>,1>,2>,4>)区域(区域的计算方式6>)

(4).重叠的计算方式
1>当两个margin都是正值的时候，取两者的最大值；
2>当margin都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移；
3>当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。

(5).BFC的用途
1>.可以阻止元素被浮动元素覆盖
2>.实现自适应两栏布局
3>.可以包含浮动元素——清除内部浮动
4>.不同的BFC可以阻止margin重叠

(6)思维导图