[css]一个块格式化上下文(BFC)阻止外边距重叠的示例

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .demo{
            height:100px;
            background: #eee;
        }
        .parent{
            height:200px;
            background: #88f;
        }
        .child{
            height:100px;
            margin-top:20px;
            background: #0ff;
            200px;
        }
    </style>
</head>
<body>
    <section class="demo">
        <h2>此部分是能更容易看出让下面的块的margin-top。</h2>
    </section>
    <section class = "parent">
        <article class="child">
            <h2>子元素</h2>
            margin-top:20px;
        </article>
        <h2>父元素</h2>
            没有设置margin-top
    </section>
</body>
</html>
复制代码

案例：如下图，父元素没有设置margin-top，而子元素设置了margin-top：20px;可以看出，父元素也一起有了边距(因为父元素和子元素的外边距合并了)。

 

 

 

 

解决办法:

.parent{
            height:200px;
            background: #88f;
            overflow: auto;
        }

为parent类添加overflow:auto属性就可以阻止它们的外边距合并，因为此值让父元素创建了块格式化上下文(BFC)进而阻止外边距合并。

*为parent创建边框也可以阻止外边距合并，原因不详

posted @   yiyide266  阅读(27)  评论(0)  编辑  收藏  举报
相关博文：
·  [css]浏览器默认样式
·  [javascript]端序(endian)和Buffer对象的read|write系列函数
·  外边距合并
·  如何解决兄弟元素或父子元素margin边距失效问题
·  CSS：外边距盒子水平居中，外边距合并-同层级
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
历史上的今天：
2019-09-27 [Linux]终端设备关系
2018-09-27 [PHP]session的一些要点
点击右上角即可分享
微信分享提示