外边距合并与BFC

2016-12-21 本文已影响18人勿以浮沙筑高台

外边距合并##

块级元素的上外边距（margin-top
）与下外边距（margin-bottom
）有时会合并（塌陷）为单个外边距，这样的现象称之为 外边距合并(塌陷)。

下面三种基本情形会出现外边距塌陷：

毗邻兄弟元素######

毗邻的两个兄弟元素之间的外边距会塌陷（当后者被 清除浮动 时除外）。

<p style="margin-bottom: 30px;">这个段落的下外边距被合并...</p>
<p style="margin-top: 20px;">...这个段落的上外边距被合并。</p>

块级父元素与其第一个/最后一个子元素######

如果块级父元素中，不存在上边框、上内补、inline content、清除浮动这四条属性（对于上边框和上内补，也可以说，当上边距及上内补宽度为0时），那么这个块级元素和其第一个子元素的上边距就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生上外边距合并现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。
类似的，若块级父元素的 margin-bottom 与它的最后一个子元素的margin-bottom 之间没有父元素的 border
、padding、inline content、height 分隔时，就会发生下外边距合并现象。
空块元素
如果存在一个空的块级元素，其 border、padding
)、inline content、height、min-height 都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。例如：

<div style="margin-top: 20px; margin-bottom: 20px;"></div>s

简单的说：垂直方向上两个相邻的(在同一个 块级格式化上下文 中) 外边距 会发生合并，合并后的外边距是两者中的较大者。在负外边距的情况下，合并后的外边距为最大正外边距与最小负外边距之和。

BFC##

块格式化上下文（block formatting context） 是页面 CSS 视觉渲染(visual CSS rendering)这个过程中的一个概念。它是决定块盒子的布局及浮动元素相互影响的一个因素。

下列情况将创建一个块格式化上下文：######

根元素或其它包含它的元素
浮动 (元素的 float 不为 none)
绝对定位元素 (元素的 position 为 absolute 或 fixed)
行内块 inline-blocks (元素的 display: inline-block)
表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)
表格标题 (元素的 display: table-caption, HTML表格标题默认属性)
overflow 的值不为 visible的元素
弹性盒子 flex boxes (元素的 display: flex 或 inline-flex)

块格式化上下文包括了创建该上下文的元素的所有子元素，但不包括创建了新的块格式化上下文的子元素。

块格式化上下文 对定位与 清除浮动 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

外边距合并与BFC