论BFC和外边距重叠

---

BFC（Block formatting contexts）?

---

单从字义上看BFC是:块级格式上下文
1. w3c规范中的BFC定义：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。

在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

2. BFC的通俗理解：
BFC是一个独立的布局环境，我们可以理解为一个容器（虚拟的），容器里面物品的摆放是不受外界的影响的。

因此, BFC中的元素的布局是不受外界的影响（我们往往可以利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块级容器与行内容器（行内容器由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

-------------------------------------------------------------BFC 相关---------------------------------------------------------------------

对于BFC : 知识点分布比较散, 但基本集中在浮动 \绝对定位\ margin collaspe (外边距折叠) 中

--------------------------------------------------------------example---------------------------------------------------------------------

图1

图1 就是通过浮动改变位置来变成我们想要的位置

图2

而图2就是描述变得多了,但看上去没有刚才美观了.
这是因为p标签里的内容受到浮动的影响, 因此上文提到可以通过创建BFC来消除浮动的影响
这里我们用overflow:hidden就可以为p创建一个BFC (BFC内部元素不受外界影响)

图3

图3即为我们理想中的效果

------------------------------------------------------- ----- BFC 与 margin collaspe---------------------------------------------------------

在相邻的容器 (可能是父子或者兄弟关系) 可能会因为两个外边距合并形成单独的一个外边距, 这种外边距合并称为外边距折叠.

外边距折叠必备条件:

**1.**必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
**2.**没有padding和border将他们分隔开
**3.**都属于垂直方向上相邻的外边距，可以是下面任意一种情况:
<1>元素的margin-top与其第一个常规文档流的子元素的margin-top
<2>元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
<3> height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和 margin-bottom