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

什么是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>

出现的现象

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

解决办法

1、float不为none(下面的盒子设置)

2、position: absolute/fixed(下面的盒子设置)

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

4、overflow不为visible(下面的盒子设置)

 文章来源地址https://www.uudwc.com/A/aYByz/

原文地址:https://blog.csdn.net/weixin_44786530/article/details/132917511

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

上一篇 2023年09月18日 00:20
leetcode数组必刷题——二分查找、移除元素、有序数组的平方、长度最小的子数组、螺旋矩阵、螺旋矩阵 II
下一篇 2023年09月18日 00:20