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

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

首先我想說(shuō)一下margin合并和margin塌陷這兩個(gè)小‘bug’。

先讓我來(lái)解釋一下什么是外邊距合并：

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

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

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

創(chuàng)建兩個(gè)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時(shí)，
但當(dāng)我們給.app2也加上margin-top: 100px;時(shí)，發(fā)現(xiàn)根本沒(méi)有變化。
這就是margin合并，在兄弟元素之間會(huì)選擇較大的一個(gè)margin值作為最后的margin值。

下面說(shuō)一下margin塌陷。

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

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

我們?cè)诮o.app2設(shè)置margin-top:100xp;發(fā)現(xiàn)沒(méi)動(dòng)。

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

看下面錯(cuò)誤的解決方法：

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

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

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

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

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

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

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

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

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

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

但不推薦使用，為什么？因?yàn)槟氵@樣會(huì)改變HTML文檔結(jié)構(gòu)，沒(méi)事你改它干什么，能不動(dòng)就不動(dòng)。那我們?cè)撛趺唇鉀Q？接下來(lái)我要放大招了，別嚇到你。我的解決辦法是：不解決! ,對(duì)你沒(méi)看錯(cuò)不解決!。

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

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

下面我們來(lái)說(shuō)一下清除浮動(dòng)

浮動(dòng)前效果看下圖：

浮動(dòng)后效果看下圖：

你可能會(huì)說(shuō)有什么區(qū)別？是沒(méi)什么區(qū)別，但你沒(méi)發(fā)現(xiàn)你看不到父級(jí)了，因?yàn)楦讣?jí)的高度沒(méi)有了（我沒(méi)有為父級(jí)指定固定的高度）。說(shuō)白了是它里面沒(méi)東西了所以撐不起它。那你會(huì)說(shuō)，給他一個(gè)不得了。好，聽(tīng)你的。

父級(jí)有高度了也能看到他了，那我們?cè)囍嘟o他幾個(gè)孩子。（為了方便看見(jiàn)我把子元素的背景換成了border，希望不會(huì)影響到你）。

孩子超出去了，你可能覺(jué)得沒(méi)什么，可是我們想要的是隨著子級(jí)的增多父級(jí)高度自動(dòng)增加。那我們?cè)趺崔k，回到主題清除浮動(dòng)。那怎么清除呢？你會(huì)想到clear: both，那我們來(lái)試試。

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

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

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

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

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

3.用HTML + CSS畫一個(gè)等腰梯形。

HTML部分：

CSS部分：

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

首先，先讓我們畫一個(gè)三角形。

我們先來(lái)看看border 的 上、右、下、左是怎么分的。

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

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

這跟梯形有什么關(guān)系，是沒(méi)關(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;
    }

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

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

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

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

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

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