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

什么是BFC

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


html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <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（下面的盒子设置）

相关阅读:
实现ALV页眉页脚
【Linux】基础IO —— 上
Linux运行环境搭建系列-Openresty安装
使用一个文件集中管理你的 Nuget 依赖版本号
java-net-php-python-ssm高校办公自动化系统计算机毕业设计程序
使用Discord机器人和Midjourney构建图像生成服务
烽火HG680-KA_310_免费升级刷机固件包及教程
堆排序c++
tesseract-ocr-w64-setup-5.3.3.20231005.exe 百度网盘下载
SwiftUI Swift基础之Swift 数组的多种方法（教程含源码）

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