关于BFC以及外边距合并相关概念的小结

1.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的例子。

在CSS中，两个或多个毗邻（父子元素或兄弟元素）的普通流中的块元素垂直方向上的 margin 会发生叠加。
这种方式形成的外边距即可称为外边距叠加(collapsed margin)。
何为毗邻：是指没有被非空内容、padding、border 或 clear 分隔开。
何为普通流：除浮动（ float ）、绝对定位（ absolute ）外的代码即为普通流。

• 兄弟关系：

  
  QQ截图20160828134158.png

1，2margin设置20px, 3设置40px；
如图发生合并，1，2之间仍为20，2，3之间为40；
可得出结论

• 两个相邻兄弟元素之间margin发生合并，两者距离以较大的值为准

可通过建立BFC来取消外边距合并；

• 父子关系：
  如图发生合并，父子元素之间外边距为40，父元素margin为40，子元素为20margin

  
  QQ截图20160828135320.png

可以给父元素添加边框，内边距或内容当做分界线，也可以让父元素形成bfc，这样就不会发生边距合并。

• 空元素（自身外边距合并）

添加边框后不合并
自身外边距合并

可以给这个元素添加添加边框，内边距，或者设置overflow：auto形成bfc。

• 创建BFC可使得两者不合并
• 通过对父元素建立border，padding，或者间隔可以使外边距不合并
• 浮动元素不合并
• 绝对定位元素不合同
• 根元素不合并
  总结：不仅仅相邻元素外边距会合并，有时候不相邻的元素外边距也可能合并，两个元素外边距会不会合并主要看它们外边距之间有没有分界线存在。所以不让两个元素的外边距合并，就要让它们之间有道分界线，这个分界线可以是border，padding或是bfc形成的独立空间。

2.去除inline-block（IE8以上兼容）内缝隙有哪几种常见方法?

• 通过消除元素之间代码的换行的间隙，可以出处内缝隙；

  
  让换行元素的标签括号相连

使元素处于一行

• 可以使用负margin来控制间隙，一般可设置-4px即可，但注意调整第一格元素的样式；
• 可以使用浮动来清除，同时记得需对父元素做清除浮动处理，避免产生影响；
• 对父元素使用font-size:0;也可以清除空隙；但子元素必须重新再设定字体大小；

3.父容器使用overflow: auto| hidden撑开高度的原理是什么？

可以使得父容器形成BFC，并触发BFC。
因为在BFC中，形成一个独立的空间，内在元素自行按照规则排列，不受外界影响也不干扰外界。
而根据规则浮动元素的高度也计算在BFC容器当中，所以高度被撑开了。
也可以理解为元素边界要与border左边界接触，所以高度被撑开了。

QQ截图20160828125903.png

4.BFC是什么？如何形成BFC，有什么作用?

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

当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context：

• float的值不为”none”
• overflow的值不为”visible”
• display的值为 “table-cell”, “table-caption”, or “inline-block”中的任何一个
• position的值不为 “static” 或 “relative”中的任何一个

BFC布局规则：

• 内部的Box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即 使存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算。

使用举例
-1. 利用BFC可以消除Margin Collapse

QQ截图20160828093512.png

• 2.用于布局

QQ截图20160828095841.png

• 3.可以包含浮动元素，解决容器高度塌陷；

QQ截图20160828125903.png

参考资料：
Block-level boxes、containing block、block formatting context 三者之间的区别和联系

5.浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法

浮动导致父容器塌陷，是因为浮动元素是脱离文档流的，此时父容器里面相当于没有元素一样，从而导致高度塌陷；
如果要解决问题即是要解决浮动带来的影响，即是要清楚浮动

• 可以创建BFC来解决
• 可以在父容器添加元素，设置清除浮动；
• 可以使用伪类元素，添加一个内容为空的元素，设置清楚浮动

6.以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？

.clearfix:after{    /*  选择clearfix创建一个after伪类 */  
  content: '';         /*   内容为空 */
  display: block;   /*  呈现块级元素*/
  clear: both;       /*   清楚元素两边浮动*/
}
.clearfix{           /*   选择class为 clearfix 的元素 */
  *zoom: 1;       /*IE8以下使用该方法触发IE浏览器的haslayout ，解决ie下的浮动，margin重叠等问题。 */
}

这种方法是创建一个空的块级元素，清楚浮动后，元素会排在浮动元素的下一行中出现，这样就撑起了父容器高度。
而BFC是形成了一个新的独立空间。

文章版权归本文作者以及饥人谷所有。