关于inline-block、BFC、边距合并

---

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

• 外边距合并指的是当两个垂直边框（通常是上和下）相遇时，会发生边距合并，形成外边框，值取最大值。
  因此，当两个垂直的外边框相遇时（紧挨），且途中没有任何元素挡住时（如另外的 border透明边框 内边框padding））就能外边距合并

• 不合并的方法有:

• float或者absolute使他们脱离文档流

• 设置padding内边框

• 或者overflow设置两个独立的BFC（前提要有2个父元素单独设置）

例子：

外边距合并test.png

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

• 让行内块元素标签紧挨 就是不能有空格 回车
• 设置负的margin-left
• 使用浮动
• 设置父元素的font-size：0

如图

inline-block去除缝隙.png

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

因为overfolw使父元素形成了一个BFC，形成独立空间，而BFC并不会受其他元素影响（子元素），因此可以撑开父元素高度

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

• BFC是形成一个独立的空间，并其里的元素不受其外部元素影响。

• 形成BFC的方法如下：

• 浮动 绝对、固定定位

• overflow（除了visible）

• display:inline-block

• 作用

• 方便布局

• 消除外边距合并

• 消除浮动（但不同于清除浮动 有副作用）

扩展知识：http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

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

• 指的是 因为浮动使元素脱离了文档流，导致本该有的高度没有了。
• 产生的原因是没有指定高度
• 解决的方法
• 清除浮动clear:both
• overflow hidden（有副作用）

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

   .clearfix:after{   --------类clearfix的伪类after
   content: ''";  --------------放置需要生成的内容
   display: block;  ----------转换为块级元素
   clear:both; ------  清除浮动
   }
   .clearfix{*zoom: 1;}  放大缩小比例  zoom:1就是和原来一样大小

其实就是通过伪类创建一个子元素，让他转变为块级元素，并清除其受到的浮动
和BFC不同的是，clear:both仅仅是消除两边的浮动，而BFC是创建独立的空间撑开，让其不受其他元素影响。

---