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

相关推荐
全职计算机毕业设计15 分钟前
基于Java Web的校园失物招领平台设计与实现
java·开发语言·前端
啊~哈39 分钟前
vue3+elementplus表格表头加图标及文字提示
前端·javascript·vue.js
小小小小宇1 小时前
前端小tips
前端
小小小小宇1 小时前
二维数组按顺时针螺旋顺序
前端
安木夕2 小时前
C#-Visual Studio宇宙第一IDE使用实践
前端·c#·.net
努力敲代码呀~2 小时前
前端高频面试题2:浏览器/计算机网络
前端·计算机网络·html
高山我梦口香糖2 小时前
[electron]预脚本不显示内联script
前端·javascript·electron
神探小白牙2 小时前
vue-video-player视频保活成功确无法推送问题
前端·vue.js·音视频
Angel_girl3193 小时前
vue项目使用svg图标
前端·vue.js
難釋懷3 小时前
vue 项目中常用的 2 个 Ajax 库
前端·vue.js·ajax