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

小草莓蹦蹦跳

已于 2024-01-25 17:59:52 修改

阅读量1.3k

点赞数 2

分类专栏：每日专栏 CSS3 文章标签： css html 前端

于 2023-04-17 15:26:02 首次发布

本文链接：https://blog.csdn.net/qq_38290251/article/details/130200994

版权

每日专栏同时被 2 个专栏收录

226 篇文章 7 订阅

订阅专栏

CSS3

55 篇文章 2 订阅

订阅专栏

文章介绍了CSS中margin塌陷的现象及原因，解释了BFC（块级格式化上下文）的概念及其六大特性，如何触发BFC，以及如何利用BFC解决margin塌陷和布局问题。此外，还提到了解决margin塌陷的其他方法，如使用padding、透明边框、伪元素等。

摘要由CSDN通过智能技术生成

1、什么是 margin重叠/塌陷？

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

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

2、开发中常见的margin塌陷

实际问题：

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

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

答案：

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

解析：

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

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

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

3、出现margin塌陷的原因

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

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

4、什么是BFC ？

文档：区块格式化上下文 - Web 开发者指南 | MDN

BFC：

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

BFC 类似一个“结界”，如果一个 DOM 元素具有 BFC，那么它内部的子元素不会影响外面的元素；外面的元素也不会影响到其内部元素。

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

5、BFC的6个特性

BFC特性：

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

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

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

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

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

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

例子：
<div style="width:60px; height:60px;">
    <div style="margin:20px; width:20px; height:20px;"></div>
</div>
以上两个盒子产生的布局效果：内部盒子并不居中，而是上边框紧贴着外部盒子。

对外部盒子采用BFC规则⑤，可以解决问题。

方法之一：在父元素上增加一个overflow：auto样式。
  <div style="width:60px; height:60px; background: red; overflow: auto">
    <div style="margin:20px; width:20px; height:20px; background: green"></div>
  </div>
更改之后：上面的两个盒子布局，由于外部是BFC元素，所以内部盒子会完全居中显示

6、BFC的功能总结

① 可以利用BFC解决两个相邻元素的上下margin重叠问题；

② 可以利用BFC解决高度塌陷问题；

③ 可以利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼等）

7、触发`BFC`的`CSS`属性

① 块级元素 overflow: 【非visible】为auto、scroll、hidden

② display: inline-block、table-cell、table-caption、table、table-row、table-row-groutable-header-group、table-footer-group、inline-table、flow-root、flex 或 inline-flex、grid 或 inline-grid

③ position: absolute、fixed

④ float：非none

⑤ 根元素(<html>)

⑥ contain 值为 layout、content 或 paint 的元素

⑦ 多列容器（column-count 或 column-width (en-US) 值不为 auto，包括 column-count 为 1）