inline-block、BFC、边距合并

问答

---

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

答：

• 两个相邻的元素在没有设置BFC或者缝隙的情况下会产生外边距合并
• 父子元素间没有设置padding或者边框的情况下会产生外边距合并
• 相邻的元素间会选择边距大的值进行合并（同为正值取大的一方，同为负值取绝对值大的一方，一正一负取相加值）
• 边距合并的取值DEMO
• 父元素可以设置padding或者边框或者BFC来清除合并
• 相邻元素可以通过加BFC容器来清除合并
• 清除外边距合并的DEMO
  注：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

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

答：

• HTML文档中并列写出display:inline-block的元素
• 利用浮动原理
• 设置父容器font-size:0
• 清除inline-block内缝隙的DEMO

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

答：

• 利用了BFC的特性，独立盒子空间，不受外界影响，但会有副作用。

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

答：

• BFC(Block formatting contents）块级格式上下文
• 可以通过设置overflow:auto|hidden display:inline-block float position:absolute来形成BFC
• DEMO
• 经测试，position:relative并不能形成BFC，谢谢老师提醒
• 可以撑开浮动元素的父元素高度或者清除普通文档流中的相邻元素的垂直外边距

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

答：

• 由于浮动元素脱离文档流，父容器没有找到子元素内容，会造成高度塌陷。
• 利用BFC特性，添加清除浮动的子元素，添加伪类
• 解决父容器高度塌陷的DEMO

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

答：

.clearfix:after{  // 在父容器的末尾添加一个伪元素
        content: '';  //伪元素的内容是个空元素
        display: block; //伪元素的显示类型是块状元素
        clear: both; //伪元素的作用是清除浮动
}
.clearfix{ *zoom: 1; //IE6,7的兼容清除方式}

• 和父容器中添加最后个空的子元素类似，通过clear:both清除浮动元素来产生作用，好处是通过伪元素添加不必在页面上添加一个空的占位符
• BFC会计算浮动元素的高度，所以会有撑开的效果，更多是为了让子元素能独立形成一个块级空间，可以和之外的块级元素互不影响。清除浮动是为了清除浮动元素的布局影响。