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

什么是BFC

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

html 复制代码
<!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(下面的盒子设置)

相关推荐
fruge3 分钟前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再6 分钟前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴12 分钟前
Lua 模块的完整入门指南
前端·lua
浪里行舟1 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1232 小时前
CSS易忘属性
前端·css
瓜瓜怪兽亚2 小时前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院2 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js
qq7798233402 小时前
React组件完全指南
前端·javascript·react.js
qq7798233402 小时前
React Hooks完全指南
前端·javascript·react.js
Moment2 小时前
性能狂飙!Next.js 16 重磅发布:Turbopack 稳定、编译提速 10 倍!🚀🚀🚀
前端·javascript·后端