前端基础：CSS盒模型(2)——边距重叠 与 块级格式化上下文

一、根据盒模型解释边距重叠 margin-collapse

边距重叠三种情况：

1. 父子元素边距重叠，父div的margin-top:30px，子div的margin-top: 10px，取最大值原则，二者重叠后的margin-top: 30px
2. 兄弟元素边距重叠，上div的margin-bottom: 30px，下div的margin-top: 10px，取最大值原则，上下div的margin间隙为30px
3. 空元素的边距重叠，一个空div既有margin-top: 10px，也有margin-bottom: 30px，取最大值原则，那么空div的margin上下重合为margin 30px

边距重叠计算规则：

1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3. 两个外边距一正一负时，折叠结果是两者的相加的和。

二、BFC(块级格式化上下文)——边距重叠解决方案

FC(格式化上下文):

• FC即格式上下文，它定义框内部元素的渲染规则。不同类型的框参与的FC类型不同，块级框对应BFC，行内框对应IFC。
• 相比BFC规则来说，IFC可能更加抽象，但总的来说，它就是行内元素自身如何显示以及在框内如何摆放的渲染规则。

注意：并不是说所有的框都会产生FC，而是符合特定条件才会产生，只有产生了对应的FC后才会应用对应渲染规则
复制代码

BFC是什么：

• 简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。
• 具有BFC的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性，例如可以包含浮动元素，常用清除浮动的方法（如 overflow方法）就是触发了浮动元素的父元素为 BFC ，使得它可以包含浮动元素，从而防止出现高度塌陷的问题。

BFC原理：

• （1） 元素的垂直方向的边距margin会发生重叠；
• （2） BFC区域不会与浮动元素的box重叠；
• （3） BFC是一个隔离的独立容器，内部与外部的元素是不会相互影响的；
• （4） 内部box在垂直方向，一个接一个的放置；
• （5） 计算BFC高度的时候，浮动元素也会参与计算（不会浮动坍塌）

如何创建BFC：

• （1） 浮动元素，float 除 none 以外的值
• （2） 绝对定位元素，position除static或者relative以外的值均可（absolute或fixed）
• （3） display 为以下其中之一的值 （inline-blocks，flex，inline-flex，table，table-cells，table-captions）
• （4） overflow 除了 visible 以外的值（hidden，auto，scroll）

BFC使用场景：

1. 使用场景1：两个或多个块级盒子的垂直相邻边界会重合

原理是利用：BFC是独立的元素，内部与外部的元素不会相互影响；

注意上图中，2的上下外边距margin（粉色部分）与1、3发生了重叠。

将2用父层div包裹，并添加BFC属性后，再看接下来的效果：

通过开发者工具选中2的盒模型，看到上下margin并没有与其兄弟元素的margin重叠

2. 使用场景2：文档流会在超出左侧浮动区块的区域向左填充

原理是利用：BFC区域不会与浮动元素的box重叠；

上图的问题是，灰色部分会向左填充浮动区块意外的区域（粉色浮动区块下面的灰色部分）

给右侧非浮动区块添加BFC属性，成为独立的BFC区块，就不会与左侧浮动元素的box重叠了

3. 使用场景3：浮动元素不会参与父元素高度计算（高度塌陷问题）

原理是利用：BFC元素的子元素即使是浮动的其也会参与高度计算（清除浮动的原理）

上图中，浮动元素没有参与到父层wrapper的高度计算中

将父层wrapper添加BFC属性，此时浮动子元素也将参与到父层元素的高度计算中，背景色呈红色

转载于:https://juejin.im/post/5b040a95518825426539cab4