inline-block、BFC、边距合并（11）

问答

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

• 场景：

1. 必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
2. 没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开
3. 都属于垂直方向上相邻的外边距

• 如何合并：两者间距取相对大的外边距。如果有正负就两值相加。
• 如何不让相邻元素外边距合并？
• ①兄弟

1. 兄弟display:inline-block

   
   
   

   兄弟display:inline-block

2. float

   
   
   

   兄弟float

3. 兄弟BFC

   
   
   

   兄弟BFC

• ②父子不合并

1. 父子border和padding

   
   
   

   父子border和padding

2. 隔代外边距合并

   
   
   

   隔代外边距合并

• ③高度为0并且最小高度也为0，不包含常规文档流的子元素合并。
  
  

  自身没有padding或border导致外边距合并
• 注：这时候我们也可以在box2形成BFC来解决这个问题。形成方法如上兄弟可见。

• 父子例子

  
  
  

  父子例子

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

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

参考

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

触发BFC（块级格式化上下文），BFC在计算高度时，浮动元素也参与计算。

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

• BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。
• 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
• 作用：

1. 阻止垂直外边距（margin-top、margin-bottom）折叠。

   
   
   

   阻止垂直外边距（margin-top、margin-bottom）折叠

2. 包含浮动

   
   
   

   包含浮动

3. BFC不会重叠浮动元素

   
   
   

   BFC不会重叠浮动元素

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

• 当容器内所有元素浮动时，浮动元素不参与高度计算。导致了父元素高度为0.
• 解决方法：

1. clear

   
   
   

   clear

2. 构建BFC

   
   
   

   overflow
   
   

   注：构建BFC还可以给父元素设置 position:absolute| display:inline-block| table-cell| table-captions| overflow:hidden/auto|

3. 直接给父元素设置高度。

   
   
   

   设置高度

4. 给父元素设置float

   
   
   

   父元素float
5. 在ie6 7下就是触发haslayout,如*zoom:1

六

Paste_Image.png

• 这是用clear：both清除浮动，为了良好的语义化，所以我们添加伪元素after，一般设了浮动，后面最好直接加一个这个语句。

1. content:''（行内元素） 必须存在，即使添加的是空文本。否则不能成功清除浮动。
2. display:block使得添加的文本变成块级元素。经试验如果是行内元素会撑不起来，inline-block只能撑起一部分，一半都不到。
3. clear:both是对自己起作用，两边不允许有浮动元素，所以它自己被挤到了下面。
4. 后面的*zoom 1本来是为了检查页面的标签是否闭合;现在用的少则是对ie6 7触发haslayout后面的值其实除了normal都可以。
   和BFC的区别：这是清除浮动（怎么清除呢？对自己产生作用，把自己这个块元素挤到最下面），BFC是包含浮动（怎么包含呢？BFC在计算高度的时候回把浮动元素计算进去）。

代码

一、实现如下效果的导航条

2

二、利用BFC的原理实现下图所示两栏布局

demo