css中BFC外边距塌陷解决办法

悠悠 2023-10-16 00:27 7阅读 0赞

## 什么是BFC ##

块级格式化上下文，独立的渲染区域，与外部毫不相干，上下两个元素都设置了外边距，结果会出现重叠的部分合并

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
          .node1 {
            width: 20px;
            height: 20px;
            background-color: orange;
            margin-bottom: 30px;
          }
    
          .node2 {
            width: 20px;
            height: 20px;
            background-color: red;
            margin-top: 10px;
          }
        </style>
      </head>
      <body>
        <div class="node1"></div>
        <div class="node2"></div>
      </body>
    </html>

##  ##

## 出现的现象 ##

两个边距合并，只有最大的那个边距了，而不是两个边距相加的和

![fe7bc39c33914a918dbb34729a9c1ada.png][]

## 解决办法 ##

1、float不为none（下面的盒子设置）

2、position: absolute/fixed（下面的盒子设置）

3、display: inline-block/flex（下面的盒子设置）

4、overflow不为visible（下面的盒子设置）

![5219c7c2f6ab405991877939122323ed.png][]

[fe7bc39c33914a918dbb34729a9c1ada.png]: https://img-blog.csdnimg.cn/fe7bc39c33914a918dbb34729a9c1ada.png
[5219c7c2f6ab405991877939122323ed.png]: https://img-blog.csdnimg.cn/5219c7c2f6ab405991877939122323ed.png

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 css中BFC外边距塌陷解决办法

什么是BFC 块级格式化上下文，独立的渲染区域，与外部毫不相干，上下两个元素都设置了外边距，结果会出现重叠的部分合并 <!DOCTYPE html> <

悠悠/ 2023年10月16日 00:27/ 0 赞/ 8 阅读

相关 CSS外边距塌陷问题分析及解决方法

概念：外边距塌陷也称为外边距合并是指两个在正常流中相邻（兄弟或父子关系）的块级元素的外边距组合在一起变成单个外边距不过只有上下外边距才会有塌陷左右外边距不会

野性酷女/ 2023年07月12日 08:54/ 0 赞/ 8 阅读

相关 CSS外边距塌陷问题

外边距塌陷：块级元素的上下外边距有时候会合并，合并后的外边距等于合并前两个外边距中的较大值，这种现象称为外边距塌陷。外边距塌陷有以下三种情况：相邻元素

缺乏、安全感/ 2023年01月06日 05:48/ 0 赞/ 160 阅读

相关外边距塌陷

什么是外边距塌陷？外边距塌陷也称为外边距合并，是指两个在正常流中相邻（兄弟或父子关系）的块级元素的外边距，组合在一起变成单个外边距，不过只有上下外边距才会有塌陷，左右外

Love The Way You Lie/ 2023年01月03日 15:28/ 0 赞/ 235 阅读

相关 CSS 外边距

CSS 外边距 ![在这里插入图片描述][20210325184513919.gif] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5n

痛定思痛。/ 2022年11月13日 04:29/ 0 赞/ 278 阅读

相关 CSS 外边距合并

CSS 外边距合并 ![在这里插入图片描述][20210325192055399.gif] > 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。 >

矫情吗；*/ 2022年10月22日 09:18/ 0 赞/ 187 阅读

相关 CSS外边距叠加

盒模型概念盒模型是css的基石之一，它指定元素如何显示及（在某种程度上）如何相互交互。页面上的每一个元素都被看做一个矩形框，这个框右元素的内容、内边距、

古城微笑少年丶/ 2022年08月07日 06:45/ 0 赞/ 260 阅读

相关 css中外边距折叠原理及解决办法

原文章链接[点击打开链接][Link 1] 晚上没事的时候看看今天白天遗留的问题，果然看的次数再多也不如动动金手，之前也看了很多遍关于外边距折叠的文章，但都没有真正的理解，今

超、凢脫俗/ 2022年05月28日 03:30/ 0 赞/ 225 阅读

相关【CSS】margin(外边距)

CSS margin(外边距)属性定义元素周围的空间。 margin margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。 marg

不念不忘少年蓝@/ 2022年03月22日 08:26/ 0 赞/ 319 阅读

相关 CSS中外边距合并及BFC解决方案

参考文章：[https://juejin.im/post/5965c46ef265da6c2518f5ec][https_juejin.im_post_5965c46ef265

梦里梦外;/ 2022年03月02日 07:20/ 0 赞/ 296 阅读