问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

margin的问题，那个老哥帮我解释下

头像
曾健
    74918
    <!DOCTYPE html>
<html lang="en">
<head>
    <title>test</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .a{
            height:48px;
            background: #eee;
        }

        .b{
            height:520px;
            background: #ff4949;
        }

        .c{
            width:90%;
            height:300px;
            margin:20px auto;
            background: #fff;
        }
    </style>
</head>
<body>
<div class="a"></div>
<div class="b">
    <div class="c"></div>
</div>

</body>
</html>

    图片描述

    div.c 不是应该被红色环绕吗？烦请那个老哥解释下。

    htmlhtml5csscss3前端
    阅读 3k
    5 个回答
    得票最新
    头像
    hyule
      1.3k1416
      ✓ 已被采纳

      因为在BFC中，两相邻（兄弟或父子）、没有边框且没有padding，元素的margin-top与其第一个常规文档流的子元素的margin-top，会产生marign-collapse（外边距折叠）。

      你给b加边框，

      border: 1px solid transparent;

      或者加padding，

      padding: 1px 0;

      都能消除。

      或者，你可以给b加 overflow: hidden;。

      可以参考：深入理解BFC和Margin Collapse

      头像
      Emrys
        1.4k4416

        你在.b中添加个overflow: hidden;就可以了。

        因为overflow 使用除了 visible 以外的值（hidden，auto，scroll）会触发BFC。
        什么是BFC？
        Block Formatting Contexts (块级格式化上下文)
        具有 BFC 的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性，例如可以包含浮动元素，上文中的第二类清除浮动的方法（如 overflow 方法）就是触发了浮动元素的父元素的 BFC ，使到它可以包含浮动元素，从而防止出现高度塌陷的问题。

        头像
        Hanger
          649137097

          overflow: hidden; 你把这句话加到 div.b 上。

          头像
          我不知道啊
            9171318

            搜一下 “子元素margin影响父元素”

            头像
            临水照花
              270722

              这个叫外边距重叠吧,子级元素的外边距会影响父级元素,并且这两的外边距大整个容器的外边距就以大的为准。这个时候应该选择触发BFC,BFC是什么前面几位说的很清楚了,触发BFC的情况有:

              • 根元素

              • float属性不为none；

              • position为absolute或fixed；

              • display为inline-block, table-cell, table-caption, flex, inline-flex；

              • overflow不为visible；

              解决办法：

              如果你给父级加上overflow：hidden,或者加上透明边框就可以解决了。
              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题