垂直方向margin重叠缘由与解决方法

时间 2019-11-11

标签垂直方向 margin 重叠缘由解决方法栏目 CSS 繁體版

原文原文链接

咱们常常写样式的时候会遇到垂直方向margin重叠的问题，以下代码： html

<style>
    .container1 {
        color: #fff;
    }

    .first {
        margin-bottom: 20px;
        padding-left: 10px;
        height: 200px;
        width: 200px;
        background-color: #28adbd;
       
    }

    .second {
        margin-top: 20px;
        height: 200px;
        width: 200px;
        background-color: #6871c1;
    }
    </style>

<body>
    <div class="container1">
        <div class="first">first p</div>
        <div class="second">second p</div>
    </div>
</body>

能够看出因为margin-top:20px;margin-bottom:20px，应该显示40px可是只显示20px，是什么缘由呢？这就涉及到BFC前端

什么是BFC：Block Formatting Context，解释为块级格式化上下文 flex

一个HTML元素要建立BFC，则知足下列的任意一个或多个条件便可：spa

一、float的值不是none。（float:left 或者float:right）3d

二、position的值不是static或者relative。（position:absolute或者position:fixed）code

三、display的值是inline-block、table-cell、flex、table-caption或者inline-flexorm

四、overflow的值不是visible（overflow:hidden、overflow:scroll） htm

五、父元素与正常文件流的子元素（非浮动子元素）自动造成一个BFC blog

BFC中盒子怎么对齐element

在一个BFC中，块盒与行盒（行盒由一行中全部的内联元素所组成）都会垂直的沿着其父元素的边框排列

W3C给出得规范是：在BFC中，每个盒子（子元素）的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来讲，则触碰到右边缘）。浮动也是如此（尽管盒子里的行盒子 Line Box 可能因为浮动而变窄）。

正常状况下一个BFC是由父元素和子元素组成的，有时候也只有一个父元素

BFC的特征

（1）全部子元素（包含浮动元素）与容器（父元素）左边对齐

（2）属于同一个BFC的父元素和子元素，相邻的父子或者兄弟间margin垂直方向会重叠，若2个元素属于不一样的BFC，则垂直方向不会重叠

（3）能够自动撑开容器（若子元素是float的，父元素设置overflow:hidden，父元素就造成一个BFC）

（4）2个同级的BFC 不会重叠（下面的例子：用于父div里面有2个div，左边一个浮动，右边一个设置overflow :auto，至关于2个子元素是2个BFC）

<div class="outer">
  <div class="float">I am a floated element.</div>
  <div class="text">I am text</div>
</div>

带有 float 类的项被向左浮动，所以 div 中的文本在它环绕 float 以后。

我能够经过将包裹文本的 div 设置为 BFC 来防止这种包裹行为。

.text {
  overflow: auto;
}

防止margin重叠咱们就能够从BFC的特征入手，让2个相邻的元素不是属于一个BFC

<style>
    .container1 {
        color: #fff;
    }

    .first {
        margin-bottom: 20px;
        padding-left: 10px;
        height: 200px;
        width: 200px;
        background-color: #28adbd;
    }

    .second {
        margin-top: 20px;
        height: 200px;
        width: 200px;
        background-color: #6871c1;
    }
    </style>


<body>
    <div class="container1">
        <div class="first">first p</div>
        <div style="overflow:hidden">
            <div class="second">second p</div>
        </div>
    </div>
</body>

因为class 为second的元素外面套了一个div（必定要套一个div，由于overflow:hidden 是设置在父元素上，里面必定要有子元素），并设置了overflow:hidden，至关于新建立了一个新的BFC, first 与second 属于2个BFC因此margin不会重叠

另外一种方法，子元素浮动，浮动至关于新建了BFC,因此不会重叠

<style>
    .container1 {
        color: #fff;
        width:200px;
    }

    .first {
        margin-bottom: 20px;
        padding-left: 10px;
        height: 200px;
        width: 200px;
        background-color: #28adbd;
    }

    .second {
        margin-top: 20px;
        height: 200px;
        width: 200px;
        background-color: #6871c1;
    }
    </style>


<body>
    <div class="container1">
        <div class="first" style="">first p</div>
        <div class="second" style="float:left">second p</div>
      </div>
</body>

相邻的子元素2个都浮动或者下面的一个浮动

更多信息请关注 公众号：前端之攻略