边距合并、BFC、清除浮动

问题

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

---

• 外边距合并会发生在相邻元素、父子元素的外边距 margin 重叠的时候。相邻元素之间的距离，取决于这两个元素之中外边距较大的一个。

• 需要注意的是，盒模型若不设定margin、padding、border或者值为0，都相当于不存在这些属性，所以父元素内部元素的margin会透过不存在的padding、border，与父元素的margin发生了重叠，充当了父元素的margin，使得子元素的外边距不能撑起在父元素中的位置。为了不发生这种情况，给父元素设定margin或者padding即可。

  
  父子元素边距合并
  取消父子元素边距合并

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

---

• 将父元素的字体大小设为font-size:0;
• 去除html原文中元素直接的空格
• 可以设inline-block元素的负margin

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

---

• 使用overflow:auto | hidden，本质是将父容器转变为一个BFC。在BFC的特性使得其包裹浮动元素。

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

---

• w3c规范中的BFC定义：
  浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
  在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
  在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

• 通过给容器添加下列任意一个样式即可形成BFC

  • overflow: scroll
  • overflow: hidden
  • display: flex
  • float: left
  • display: table

• 当元素分属于其他BFC时，他们之间就不会产生一些联系，例如外边距折叠，文字环绕浮动元素。这些特性可以用来形成多栏布局，清除文字环绕，也可以用来包裹浮动元素。

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

---

浮动高度塌陷

• 浮动元素脱离了文档流，使得父容器没有内容，无法撑起自身高度。解决方法：
  • 清除浮动 stackoverflow
  • 父元素形成BFC，包裹浮动元素

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

---

.clearfix:after{ 
    content: ''; //空字符
    display: block;// 显示为块级元素
    clear: both;//清除两侧浮动
} //用于清除浮动 
.clearfix{ 
    *zoom: 1;//用于兼容IE6、7
}

---

本教程版权归 张宇 和 饥人谷 所有，转载须说明来源