這一篇來說明一下css當(dāng)中一些bug，這兩個bug出現(xiàn)在margin屬性上面乔宿，分別是margin合并和margin塌陷

margin合并

首先我們理解一下margin的正常效果蹂午，比如下面的例子，我們通過margin讓兩個元素隔開

<span class="left">我在左邊</span>
<span class="right">我在右邊</span>

.left{
    color: red;
    margin-right: 20px; 
}
.right{
    color: green;
    margin-left: 20px;
}
/* 這樣設(shè)置之后舞箍，他們之間的間距應(yīng)該是 20px + 20px = 40px */

當(dāng)然顯示出來的樣子和我們預(yù)期的是一樣的溃蔫！

正常的margin.png

那么margin合并出現(xiàn)在什么地方呢？那么我們來看一下上下布局的時候扎狱，這里的margin的情況

<div class="top">我在上面</div>
<div class="bottom">我在下面</div>

.top{
    width: 100px;
    height: 100px;
    background: red;
    margin-bottom: 100px;
}
.bottom{
    width: 100px;
    height: 100px;
    background: green;
    margin-top: 100px;
}
/*理論上我們看到的應(yīng)該是兩個div上下相隔200px*/

但是實際上和我們猜測的有點出入侧到，它們這里的div的高度是100px

合并了的margin.png

所以什么是margin合并呢？

兄弟結(jié)構(gòu)水平方向的margin正常委乌，但是垂直方向上面的margin會合并，并且這里的取到的是較大的一個荣回，一般情況下遭贸，margin合并我們可以不處理，合理安排垂直方向的margin就能達到需求效果心软。

margin塌陷

父子結(jié)構(gòu)的元素，垂直方向上的margin，會取最大那個

<div class="box">
    <div class="wrapper">
        <div class="content"></div>
    </div>
</div>

.box{
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}
.wrapper {
    width: 100px;
    height: 100px;
    background: #000;
    margin-top: 50px;
    margin-left: 50px;
}
.content {
    margin-left: 100px;
    /*margin-top: 100px;*/
    width: 50px;
    height: 50px;
    background: orange;
}

根據(jù)上面代碼恼布，我們先將margin-top給注釋掉攒射，看一下結(jié)果

正常的margin.png

我們可以看到，我們的黃色方塊根據(jù)黑色方塊向左移動了100px猎唁，這樣可以理解咒劲，很正常，但是當(dāng)我們將注釋的代碼打開的時候，根據(jù)上面的經(jīng)驗我們應(yīng)該看到的是黃色的方塊到了黑色的方塊的對角線的下方腐魂。

塌陷的margin.png

先了解一下BFC

BFC: block format context - 塊級格式化上下文迅脐，每一個盒子當(dāng)中都有一套正常的渲染規(guī)則，但是我們可以通過一些語法擂红，來觸發(fā)bfc仪际，讓這個盒子的渲染規(guī)則不一樣！ 就是這個渲染規(guī)則的改變昵骤，剛好就解決了margin塌陷的問題树碱，下面是觸發(fā)bfc的語法：

1. position： absolute；
2. display：inline-block;
3. float：left / right
4. overflow: hidden;

margin塌陷的解決方案

1. 給父級元素变秦，上面的黑色盒子成榜，加一個頭頂，直接使用border-top來處理蹦玫，但是這樣會帶來更多的問題赎婚，多了的border像素影響也是不小的。
2. 使用overflow：hidden樱溉；來觸發(fā)bfc來解決挣输，overflow：hidden；自己也有自己的含義福贞，溢出部分隱藏撩嚼，這個方法有個缺點就是，假如我們有使用js來更換子元素的位置的時候挖帘，一旦出了盒子完丽，就不能顯示了
3. 其他觸發(fā)bfc的方法
   如上的方案我們根據(jù)實際情況來選擇，比如假如父級元素剛好就要加邊框拇舀，那么我們就剛好可以選擇第一種方法逻族，根據(jù)需求合理的選擇。

使用bfc來處理margin合并骄崩，高端一下

其實我們可以使用bfc來處理margin合并的情況聘鳞，給兩個元素或者其中一個元素加上一個父級元素薄辅，并讓父級元素觸發(fā)bfc

<div class="box">
    <div class="top"></div>
</div>
<div class="box">
    <div class="bottom"></div>
</div>

.box{
    overflow: hidden;
}
.top {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-bottom: 100px; 
}
.bottom {
    width: 100px;
    height: 100px;
    background-color: green;
    margin-top: 100px;
}

處理好的結(jié)果：

bfc解決margin合并.png

但是這種方法是不推薦的，主動去改變html結(jié)構(gòu)是很不理想的做法８橥础３げ蟆！