有遇到过margin重叠/塌陷问题吗？

目录

1、什么是 margin重叠/塌陷

2、开发中常见的margin塌陷 

3、出现margin塌陷的原因 

4、什么是BFC ？

5、BFC的特性和功能总结

6、触发BFC的CSS属性

7、解决margin塌陷的办法

---

1、什么是 margin重叠/塌陷

margin重叠（又称margin塌陷）：文档流内，块级元素与块级元素垂直方向上的 margin 合并（塌陷）为单个 margin，且只发生在垂直方向。

inline元素不存在margin 塌陷，因为inline元素不占有外边距，同样道理float元素也不存在margin合并。

2、开发中常见的margin塌陷 

实际问题：

有两个盒子，上盒子外边距100px，下盒子外边距20px，那最后它们的边距是多少？

如果换成水平方向呢？它们之间的间距是多少？

答案：

垂直方向：100px;     水平方向：120px；

解析：

垂直情况，谁的”margin-方向“最大，那距离就等于谁；

垂直方向计算规则： 正正取大值，正负值相加，负负最小值

水平情况下，它们之间的距离等于它们所设置的外边距之和。

3、出现margin塌陷的原因 

出现margin塌陷的原因：很久以前是为了解决多文本段落排版的问题；

设想，当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。

4、什么是BFC ？

BFC：

BFC（块级格式化上下文）是一个完全独立的空间（布局环境），独立的渲染区域，让空间里的子元素不受外面布局影响。

BFC是隔离了的容器，所以BFC可以用来解决margin塌陷。

5、BFC的特性和功能总结

BFC特性：

① 属于同一个BFC的两个相邻容器的上下margin会重叠（重点）

② 计算BFC高度时浮动元素也参于计算（重点）

③ BFC的区域不会与浮动容器发生重叠（重点）

④ BFC内的容器在垂直方向依次排列

⑤ 元素的margin-left与其包含块的border-left相接触

⑥ BFC是独立容器，容器内部元素不会影响容器外部元素

 BFC功能总结：

① 可以利用BFC解决两个相邻元素的上下margin重叠问题；
② 可以利用BFC解决高度塌陷问题；
③ 可以利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼等）

 

6、触发BFC的CSS属性

触发BFC的CSS属性：

① overflow: 非visible (由于BFC的特性②，所以可以解决子元素浮动时，父元素高度塌陷的问题)       

② display: inline-block、table-cell、flex、inline-flex、table-caption

③ position: absolute、fixed

④ float：非none

⑤ 根元素()

7、解决margin塌陷的办法

对于父子元素：

① 子元素取消margin，用父元素的padding代替

② 父元素增加透明边框 border:1px solid transparent  // 这是基于最上面说的(其间没有任何非空内容、补白、边框)原理实现。

③ 父元素设置为BFC

④ 父元素增加一个伪元素

对于兄弟元素：

① 父元素flex布局，触发BFC，创建隔离的容器

② 子元素浮动定位，父元素清除浮动

③ 让其中一个兄弟元素触发BFC

原理：使得原本属于同一个BFC的两个兄弟元素，变成不同的BFC