BFC解决边距重叠问题

最新推荐文章于 2022-09-14 16:41:18 发布

汤圆真的好可爱

最新推荐文章于 2022-09-14 16:41:18 发布

阅读量183

点赞数

分类专栏：笔记文章标签： html css html5

本文链接：https://blog.csdn.net/qq_41083105/article/details/115211440

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

BFC的定义

BFC：Block Formatting Context，即:“块级格式化上下文”。

边距重叠

依照我的个人理解，所谓的边距重叠，就是“谁大谁牛逼”。举个例子，如果有两个块级box，这两个box都是按照标准流垂直摆放的，第一个盒子指定了20px的margin，第二个盒子指定了10px的margin，理论上这两个盒子的margin应该是：20px + 10px = 30px，但实际上只取较大的margin为实际的margin，也就是20px，这就是边距重叠了。

<style>
        .d1 {
            margin-bottom: 20px;
            height: 100px;
            background-color: red;
        }
        .d2 {
            margin-top: 10px;
            height: 100px;
            background-color: green;
        }
</style>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
</body>

效果图：

可以看到，第一张图的黄色部分是20px，第二章图的黄色部分是10px，总体的之间的margin是取的box1的20px，即较大者。

解决办法

用div或者section把第一个盒子或者第二个盒子包起来，再对盒子的父元素的overflow属性设置hidden即可。

具体代码实现：

<style>
        .d {
            overflow: hidden;
        }
        .d1 {
            height: 100px;
            background-color: green;
            margin-bottom: 20px;
        }
        .d2 {
            height: 100px;
            background-color: red;
            margin-top: 10px;
        }
</style>

<body>
    <div class="d">
        <div class="d1"></div>
    </div>
    <div class="d2"></div>
</body>

效果图：

可以看到，现在总的外边距很明显变成了30px而不是较大的20px。

汤圆真的好可爱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BFC解决边距重叠问题

BFC解决边距重叠问题BFC的定义 BFC：Block Formatting Context，即:“块级格式化上下文”。边距重叠依照我的个人理解，所谓的边距重叠，就是“谁大谁牛逼”。举个例子，如果有两个块级box，这两个box都是按照标准流垂直摆放的，第一个盒子指定了20px的margin，第二个盒子指定了10px的margin，理论上这两个盒子的margin应该是：20px + 10px = 30px，但实际上只取较大的margin为实际的...
复制链接

扫一扫

专栏目录