垂直方向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個都浮動或者下面的一個浮動

更多信息請關注 公衆號：前端之攻略

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。