在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例。
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
如何合并？
- 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
- 两个外边距一正一负时，折叠结果是两者的相加的和。
如何不合并？
- 创建了新的BFC的元素（例如浮动元素或者'overflow'值为'visible'以外的元素）与它的子元素的外边距不会折叠
- 浮动元素不与任何元素的外边距产生折叠（包括其父元素和子元素）
- 绝对定位元素不与任何元素的外边距产生折叠
- inline-block元素不与任何元素的外边距产生折叠
父子外边距合并
去除inline-block内缝隙有哪几种常见方法?
- 去掉li标签之间的空格
- 负margin-left，注意第一个li要去掉负margin-left
li {
margin-left:-4px;
}
div>li:firstchild {
margin-left:0;
}
- 浮动
div {
overflow:auto;
}
div>li {
float:left；
}
- 子元素inline-block 父元素font-size:0;
div { font-size:0; } div>li { dispaly:inline-block; font-size:12px; }
父容器使用overflow: auto| hidden撑开高度的原理是什么？
当overflow设置为auto或scroll或hidden时可以触发BFC，使得父容器能够包裹浮动元素。
overflow撑起父容器高度
参考文章深入理解CSS溢出overflow
BFC是什么？如何形成BFC，有什么作用?
BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。
触发BFC条件：
- float的值不为none。
- overflow的值为auto,scroll或hidden。
- display的值为table-cell, table-caption, inline-block中的任何一个。
- position的值不为relative和static。
BFC的作用：在布局上自动填满，除去浮动内容以外的剩余空间，也就是自适应布局。** PS：BFC形成独立空间，外边距不与其他元素发生合并。 **
参考文章：BFC特性下多栏自适应布局
浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法？
高度塌陷是指父容器内部的子元素由于浮动导致其脱离了文档流，父容器认为内部没有元素，高度因此将塌陷为0。
解决方法：
- 清除浮动
.clearfix:after {
content:'';
display:block;
clear:both;
}
- BFC 父容器 overflow:hidden|auto;
以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
/* 在父容器内部最后添加一个元素 */
.clearfix:after {
/* 元素内容为空 */
content: '';
/*元素为块级元素 */
display: block;
/* 清除左右两侧浮动 */
clear: both;
}
.clearfix {
/* 使清除浮动兼容ie6,ie7 */
*zoom: 1;
}
clearfix是在父容器里设置了一个空的div清除浮动。而BFC是形成了一个独立空间，不会与其他元素有相互作用。
