CSS篇——BFC与margin

首先FC： Formatting Context 指页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。

　　　　　CSS2.1中有BFC(block)和IFC(Inline).

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.overflow不为hidden的元素(这就是之所以 overflow:hidden可以清除浮动的原因).

　　5.display为inline-block,table-cell, table-caption, flex, inline-flex

所以可以根据以上的规则解决css中部分margin重叠的问题。

 

margin重叠 ：

　　margin参数：上右下左（4个值），其他：四个边距两两对称，比如3个值时，分别对应上右下， 左边边距和右边值一样。

margin折叠结果：

1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3. 两个外边距一正一负时，折叠结果是两者的相加的和。

除了与BFC有关情况，以下情况也不会发生重叠：

　　1.父元素有padding和border，则子元素的marginTop和父元素的marginTop不会重叠。

　　2.浮动元素以后的元素设置浮动闭合后，闭合元素上方会产生间隙，根据w3c规范规定，闭合浮动的元素会在其margin-top以上产生一定的空隙（clearance），该空隙会阻止元素margin-top的折叠，并作为间距存在于元素的margin-top的上方。闭合浮动的元素的border-top会紧贴着相应的浮动元素的margin-bottom。

（具体例子见

　　http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

）

 

具体例子见：

　　http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

　　http://www.cnblogs.com/dojo-lzz/p/3999013.html