inline-block BFC 边距合并

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

答：相邻的两个盒子（兄弟关系或者父子关系）的外边距margin可以结合成一个单独的外边距。
合并条件：必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开
都属于垂直方向上相邻的外边距。

合并后边距的计算：
两个相邻的外边距margin都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距margin都是负数时，折叠结果是两者绝对值的较大值。
两个外边距margin一正一负时，折叠结果是两者的相加的和。

如何防止外边距合并：
1.内层元素透明边框 border:1px solid transparent;
2.内层元素padding:1px；
3.内层元素加float:left（需要父元素清除浮动）;或display:inline-block;
4.内层元素绝对定位 postion:absolute:
5.外层元素 overflow:hidden;

父子元素外边距合并范例及解决办法




  
  margin合并
 



  
    margin=30px;
  
  
    margin=50px;
  

    2124314214321432332

父子元素边距合并

从上图可以看出：红色背景下，灰色的父元素ct1的边框和浏览器的距离是30px（父元素本身margin大小），由于父元素的margin大于子元素margin，所以合并后的边距是父元素的margin=30px。但是，ct1的下边距和ct2（蓝色部分）的距离是50px（也就是box2的margin大小），是由于子元素box1的margin大于父元素ct1的margin，所以和ct2的边距是50px；.
解决方法：只需要在父元素的class属性里面加上 overflow：hidden即可，

效果图

参考资料1参考资料2

二，去除inline-block内缝隙有哪几种常见方法?

答：有如下几种方法：
1.父元素font-size：0；子元素font-size：x px。子元素根据实际情况设置。（推荐这种方式）
2.标签首位之间不要有空格，连写(

)。
3.负margin。
4.浮动，（父元素需要加overflow：hidden或清除浮动）

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

答：父元素使用ocerflow:auto|hidden形成了一个BFC。父元素形成了一个独立的空间（BFC），不在收外界干扰，所以能撑开高度。

overflow解析：
overflow:hidden;
用于隐藏超出父容器内容区范围的内容。同时也可以起到清除浮动的作用，使不处在正常文档流中的子元素回到文档流。overflow:auto;
根据浏览器进行文本截断。

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

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

BFC特性：

在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。

在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
BFC的区域不会与float box叠加。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
计算BFC的高度时，浮动元素也参与计算。
在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

BFC的作用：

如果父元素BFC，可防止子元素外边距合并。

可以优雅的进行两栏布局
可以清除内部浮动。

参考资料

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

答：浮动以子元素就脱离了文档流，父元素中没有文档流的元素可以撑开父元素，所以父元素的高度会塌陷。
解决方法：
1.对父元素：利用BFC，在父元素中设置
{display: inline-blick;/*三选一*/ overflow: auto;/*三选一，清除浮动带来的副作用最小*/ 推荐使用 float: left;/*三选一*/}
2.对子元素clear：
在最后一个子元素后加入

，清除浮动元素。
3.或者在父元素上使用伪类
.clearfix::after {content: ''; display: table; clear: both;}
ps:IE6、7 用 .clearfix {*zoom: 1;}
参考资料

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

.clearfix:after{ content: ''; display: block; clear: both;} .clearfix{ *zoom: 1;}

答：作用看代码注释

.clearfix:after{ content: '';/*在.clearfix后面添加一个空的行内元素*/ display: block;/*将这个空的行内元素以块级元素的表现方式去渲染*/ clear: both;/*不允许该元素左右出现浮动元素*/} .clearfix{ *zoom: 1;/*兼容IE6、IE7、IE8浏览器，经常会遇到一些问题，可以使用zoom:1来解决*/}

根本区别：这个伪类是空的元素，通过CSS渲染，单纯的清除浮动。BFC是形成独立的空间。