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(下面的盒子设置)

相关推荐
Pu_Nine_944 分钟前
教程: 在网页中利用原生CSS实现3D旋转动画
css·3d·css3
mapbar_front1 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie1 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀1 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻1 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树2 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔2 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
Asthenia04122 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj503 小时前
前端基础之《React(1)—webpack简介》
前端·react
被巨款砸中3 小时前
前端 20 个零依赖浏览器原生 API 实战清单
前端·javascript·vue.js·web