摘要：合并的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。那我們怎么辦，回到主題清除浮動。你可能忘了偽元素是行內(nèi)元素，只有塊元素才能清除浮動。所以我們最好后，主動清除一下浮動，避免以后遇到很奇怪的問題。

這是我的第一篇掘金文章，希望大家不要嫌棄。我還是一名在校大學(xué)生，就是想把自己所學(xué)到的知識寫出來，加深自己的印象，記錄自己成長的過程，這篇文章主要是介紹HTML 、 CSS 的一些小知識點(diǎn)。

首先我想說一下margin合并和margin塌陷這兩個小‘bug’。

先讓我來解釋一下什么是外邊距合并：

所謂的外邊距合并就是，當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊距。合并的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。

按我個人的理解，margin合并一般是兄弟之間，margin塌陷一般是父子之間。

我們先說一下margin合并，話不多說，直接上代碼。

創(chuàng)建兩個div

樣式如下` .app {
height: 60px;
margin-bottom: 100px;
background-color: #165;

}
.app2 {
    height: 60px;
    margin-top: 100px;
    background-color: #981;
}```

當(dāng)我們給.app加上margin-bottom: 100px時，
但當(dāng)我們給.app2也加上margin-top: 100px;時，發(fā)現(xiàn)根本沒有變化。
這就是margin合并，在兄弟元素之間會選擇較大的一個margin值作為最后的margin值。

下面說一下margin塌陷。

同樣的創(chuàng)建兩個div`

我們給大的也就是.app設(shè)置margin-top: 100px;變成這樣：

我們在給.app2設(shè)置margin-top:100xp;發(fā)現(xiàn)沒動。

這時候就感覺是不是設(shè)置錯了或?qū)戝e了，可是怎么看都是對的，但結(jié)果為什么是這樣的我明明給.app2加了margin-top:100px;的樣式了啊，它為什么不動，此時我們試著加大.app2的margin-top值神奇的發(fā)現(xiàn)動了,但不僅它動還帶著它爸一起動，這是要帶全家跑的節(jié)奏啊。
此時是不是感覺很奇怪為什么啊？因?yàn)樵诖怪狈较蛏系?b>maigin會合并，就好像父級沒有了頂一樣，露天的了，而且他們還會取最大的一個，你說貪不貪,看個玩笑啊。

看下面錯誤的解決方法：

當(dāng)我們給```.app```加上```border-top: 10px solid yellowgreen```（加```10px```只是為了方便看見）時，發(fā)現(xiàn)我們的bug也得到了解決。
![](https://user-gold-cdn.xitu.io/2018/12/9/16792a87c3231494?w=229&h=295&f=png&s=4253)是不是很開心，但你不覺得奇怪嗎？多出來一個```border```啊。去掉？那這個問題沒解決啊。那怎么辦，你是不是想著減小它，那我們試試，我把```10px改成了1px```。是不是感覺看不見了，

但我們放大還是能看得見。這時你是不是想起來改顏色，那我們改個顏色。我把顏色改成了transparent，這肯定看不見吧，而且也解決了這個問題。是不是很開心，但要是用這種方法解決我覺得我就沒有寫的必要了。記住我們不要輕易去改變DOM結(jié)構(gòu)不要為了解決一些問題去添加沒有實(shí)際意義的標(biāo)簽或樣式。

2.在說解決方案之前先讓我們了解一下什么是BFC（不是KFC啊）。
BFC(Block formattingcontext)直譯為"塊級格式化上下文"它是一個獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干。
簡單來說就是你能通過BFC來改變一個元素的渲染規(guī)則。聽著是不是很厲害。

那BFC是不是一個屬性或元素啊，NO！不過他好像沒多大的作用但它就偏偏解決了這個所謂的bug，好像就是為它而生的。那怎么樣觸發(fā)一個元素的BFC呢，很簡單，你幾乎隨時都在觸發(fā)一個元素的BFC，是不是很懵逼,什么！。下面介紹幾個css屬性，這些你肯定天天在用：

  1、浮動元素，float 除 none 以外的值； 
  2、定位元素，position（absolute，fixed）； 
  3、display 為以下其中之一的值 inline-block，table-cell，table-caption； 
  4、overflow 除了 visible 以外的值（hidden，auto，scroll）；```

是不是很熟悉，上面列出來的都能觸發(fā)一個個盒子的BFC，就是這么簡單。
當(dāng)我們給.app加上display: inline-block;時：

發(fā)現(xiàn).app2的頂變成了.app不再是瀏覽器了。或者我們在給.app設(shè)置成overflow: hidden發(fā)現(xiàn)也能解決margin合并的問題：

只不過超出部分隱藏了。這就帶來了第二個問題：我們該用哪個呢？
其實(shí)我也不知道，是不是很驚訝，不知道你寫什么寫一會底下評論區(qū)噴死你。其實(shí)我是真不知道用哪一個，它要根據(jù)你實(shí)際的需求來決定用哪一個。有弊有利需要你自己權(quán)衡。如果你的需求是超出部分不要隱藏那你設(shè)置一個overflow: hidden是不是很尷尬。

好了，margin塌陷解決了，那就剩margin合并了，同樣應(yīng)用上面的BFC規(guī)則。

將兄弟元素分別作為子元素放在塊級元素內(nèi)，然后將其父級元素的渲染規(guī)則該為BFC。

但不推薦使用，為什么？因?yàn)槟氵@樣會改變HTML文檔結(jié)構(gòu)，沒事你改它干什么，能不動就不動。那我們該怎么解決？接下來我要放大招了，別嚇到你。我的解決辦法是：不解決! ,對你沒看錯不解決!。

就是直接改變其中一個的外邊距的值。

其實(shí)當(dāng)你遇到margin合并時你為什么要子設(shè)置一個父設(shè)置一個，最后還想著改變他們的渲染規(guī)則有甚者改變HTML結(jié)構(gòu)，它既然取大的值那你就給它個大的。比如你想要他們上下間距是200px，你非得一個margin-top: 100px，一個margin-bottom: 100px，你直接取一個margin-top | margin-bottom : 200px不得了。

下面我們來說一下清除浮動

浮動前效果看下圖：

浮動后效果看下圖：

你可能會說有什么區(qū)別？是沒什么區(qū)別，但你沒發(fā)現(xiàn)你看不到父級了，因?yàn)楦讣壍母叨葲]有了（我沒有為父級指定固定的高度）。說白了是它里面沒東西了所以撐不起它。那你會說，給他一個不得了。好，聽你的。

父級有高度了也能看到他了，那我們試著多給他幾個孩子。（為了方便看見我把子元素的背景換成了border，希望不會影響到你）。

孩子超出去了，你可能覺得沒什么，可是我們想要的是隨著子級的增多父級高度自動增加。那我們怎么辦，回到主題清除浮動。那怎么清除呢？你會想到clear: both，那我們來試試。

加上了一個p標(biāo)簽，設(shè)置了clear: both問題解決了。

但你是不是改了結(jié)構(gòu)，那說明不可取試著換換別的方法吧。記不記得偽元素？
說白了父級之所有沒有高度是因?yàn)樽蛹壐?strong>脫離了文檔流跟父級不在一個流里了，所以父級看不到他們，高度自然就不會被撐開了。既然提到了偽元素那我們就用偽元素來解決。
我們給父級設(shè)置`::after {

    content: "";
    clear: both;
}```

看看。發(fā)現(xiàn)沒變化，哈哈。你可能忘了偽元素是行內(nèi)元素，只有塊元素才能清除浮動。在這里再說一下，所有的行內(nèi)元素就是帶有inline的都能看到浮動元素，塊元素看不到浮動元素。當(dāng)我們把after變成塊元素后發(fā)現(xiàn)浮動被清除了。

其實(shí)清除浮動不只這種方法，只要你觸發(fā)了父級的BFC同樣也能清除浮動。我這里就不演示了，究其原因是因?yàn)椋何艺f過只有塊級元素看不到浮動元素，當(dāng)你使用上面推薦的幾種觸發(fā)BFC的方法時，其實(shí)你是把他們變成了行內(nèi)元素，所以高度就被撐開了。所以我們最好float后，主動清除一下浮動，避免以后遇到很奇怪的問題。

3.用HTML + CSS畫一個等腰梯形。

HTML部分：

CSS部分：

.app {
        width: 0;
        height: 0;
        border: 100px solid #561;
}

首先，先讓我們畫一個三角形。

我們先來看看border 的 上、右、下、左是怎么分的。

別吐槽我的審美，我是真不知道用什么顏色。border就是這么分的，有沒有看到三角形。這樣我們把其他三個方向的border設(shè)置成透明的一個三角形就畫出來了。

border-top: 100px solid transparent;
        border-bottom: 100px solid #561; 
        border-left: 100px solid transparent; 
        border-right: 100px solid transparent; 

這跟梯形有什么關(guān)系，是沒關(guān)系，但是又有很大的關(guān)系。
下面不解釋了，直接上代碼。

.app {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: #561;
    }
    .app::after {
        content: "";
        position: absolute;
        right: -100px;
        border: 50px solid transparent;
        border-bottom-color: #561; 
        border-left-color: #561; 
    }
    .app::before {
        content: "";
        position: absolute;
        left: -100px;
        border: 50px solid transparent;
        border-bottom-color: #561; 
        border-right-color: #561;
    }

這只是我個人的理解和實(shí)現(xiàn)。
4.說一些小知識點(diǎn)

其實(shí)我們設(shè)置字體大小的時候設(shè)置的是字體的高度。

其實(shí)一個元素的line-height也能決定一個元素的高度。

.app {
        width: 100px;
        color: #fff;
        background-color: #561;
    }

當(dāng)我們設(shè)置line-height=100px時：
變成了這樣，其實(shí)這也是垂直居中的一個原理吧。

總結(jié)： 以上是我對我了解的一些知識點(diǎn)的總結(jié)，希望可以幫到一些人，同時也讓我加深了對這些知識點(diǎn)的理解和認(rèn)識，作為一名自學(xué)前端的在校大學(xué)生希望大佬們指出錯誤，一起探討。感謝。