margin合併、塌陷，清除浮動

這是個人第一篇掘金文章，但願你們不要嫌棄。我仍是一名在校大學生，就是想把本身所學到的知識寫出來，加深本身的印象，記錄本身成長的過程，這篇文章主要是介紹HTML 、 CSS 的一些小知識點。

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

• 先讓我來解釋一下什麼是外邊距合併：

所謂的外邊距合併就是，當兩個垂直外邊距相遇時，它們將造成一個外邊距。合併的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

• 按我我的的理解，margin合併通常是兄弟之間，margin塌陷通常是父子之間。

• 咱們先說一下margin合併，話很少說，直接上代碼。

  • 建立兩個div <div class="app"></div><div class="app2"></div>
  • 樣式以下` .app {
    height: 60px;
    margin-bottom: 100px;
    background-color: #165;

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

當咱們給.app加上margin-bottom: 100px時，
但當咱們給.app2也加上margin-top: 100px;時，發現根本沒有變化。
這就是margin合併，在兄弟元素之間會選擇較大的一個margin值做爲最後的margin值。

• 下面說一下margin塌陷。
• 一樣的建立兩個div`<div class="app">
  <div class="app2"></div> </div>`

咱們給大的也就是.app設置margin-top: 100px;變成這樣：

咱們在給.app2設置margin-top:100xp;發現沒動。

這時候就感受是否是設置錯了或寫錯了，但是怎麼看都是對的，但結果爲何是這樣的我明明給.app2加了margin-top:100px;的樣式了啊，它爲何不動，此時咱們試着加大.app2的margin-top值神奇的發現動了,但不只它動還帶着它爸一塊兒動，這是要帶全家跑的節奏啊。
此時是否是感受很奇怪爲何啊？由於在垂直方向上的maigin會合並，就好像父級沒有了頂同樣，露天的了，並且他們還會取最大的一個，你說貪不貪,看個玩笑啊。

看下面錯誤的解決方法：

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

但咱們放大仍是能看得見。這時你是否是想起來改顏色，那咱們改個顏色。我把顏色改爲了transparent，這確定看不見吧，並且也解決了這個問題。是否是很開心，但要是用這種方法解決我以爲我就沒有寫的必要了。記住咱們不要輕易去改變DOM結構不要爲了解決一些問題去添加沒有實際意義的標籤或樣式。

2.在說解決方案以前先讓咱們瞭解一下什麼是BFC（不是KFC啊）。
BFC(Block formattingcontext)直譯爲"塊級格式化上下文"它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。
簡單來講就是你能經過BFC來改變一個元素的渲染規則。聽着是否是很厲害。

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

一、浮動元素，float 除 none 之外的值； 
  二、定位元素，position（absolute，fixed）； 
  三、display 爲如下其中之一的值 inline-block，table-cell，table-caption； 
  四、overflow 除了 visible 之外的值（hidden，auto，scroll）；```

是否是很熟悉，上面列出來的都能觸發一個個盒子的BFC，就是這麼簡單。
當咱們給.app加上display: inline-block;時：

發現.app2的頂變成了.app再也不是瀏覽器了。或者咱們在給.app設置成overflow: hidden發現也能解決margin合併的問題：

只不過超出部分隱藏了。這就帶來了第二個問題：咱們該用哪一個呢？
其實我也不知道，是否是很驚訝，不知道你寫什麼寫一會底下評論區噴死你。其實我是真不知道用哪個，它要根據你實際的需求來決定用哪個。有弊有利須要你本身權衡。若是你的需求是超出部分不要隱藏那你設置一個overflow: hidden是否是很尷尬。

好了，margin塌陷解決了，那就剩margin合併了，一樣應用上面的BFC規則。

• 將兄弟元素分別做爲子元素放在塊級元素內，而後將其父級元素的渲染規則該爲BFC。

但不推薦使用，爲何？由於你這樣會改變HTML文檔結構，沒事你改它幹什麼，能不動就不動。那咱們該怎麼解決？接下來我要放大招了，別嚇到你。個人解決辦法是：不解決! ,對你沒看錯不解決!。

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

其實當你遇到margin合併時你爲何要子設置一個父設置一個，最後還想着改變他們的渲染規則有甚者改變HTML結構，它既然取大的值那你就給它個大的。好比你想要他們上下間距是200px，你非得一個margin-top: 100px，一個margin-bottom: 100px，你直接取一個margin-top | margin-bottom : 200px不得了。

1. 下面咱們來講一下清除浮動

浮動前效果看下圖：

浮動後效果看下圖：

你可能會說有什麼區別？是沒什麼區別，但你沒發現你看不到父級了，由於父級的高度沒有了（我沒有爲父級指定固定的高度）。說白了是它裏面沒東西了因此撐不起它。那你會說，給他一個不得了。好，聽你的。

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

孩子超出去了，你可能以爲沒什麼，但是咱們想要的是隨着子級的增多父級高度自動增長。那咱們怎麼辦，回到主題清除浮動。那怎麼清除呢？你會想到clear: both，那咱們來試試。

加上了一個p標籤，設置了clear: both問題解決了。

但你是否是改告終構，那說明不可取試着換換別的方法吧。記不記得僞元素？
說白了父級之全部沒有高度是由於子級浮動脫離了文檔流跟父級不在一個流裏了，因此父級看不到他們，高度天然就不會被撐開了。既然提到了僞元素那咱們就用僞元素來解決。
咱們給父級設置`::after {

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

看看。發現沒變化，哈哈。你可能忘了僞元素是行內元素，只有塊元素才能清除浮動。在這裏再說一下，全部的行內元素就是帶有inline的都能看到浮動元素，塊元素看不到浮動元素。當咱們把after變成塊元素後發現浮動被清除了。

其實清除浮動不僅這種方法，只要你觸發了父級的BFC一樣也能清除浮動。我這裏就不演示了，究其緣由是由於：我說過只有塊級元素看不到浮動元素，當你使用上面推薦的幾種觸發BFC的方法時，其實你是把他們變成了行內元素，因此高度就被撐開了。因此咱們最好float後，主動清除一下浮動，避免之後遇到很奇怪的問題。

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

HTML部分：<div class="app"></div>

CSS部分：

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

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

  • 咱們先來看看border 的 上、右、下、左是怎麼分的。

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

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

這跟梯形有什麼關係，是不要緊，可是又有很大的關係。
下面不解釋了，直接上代碼。

.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;
    }

這只是我我的的理解和實現。
4.說一些小知識點

• 其實咱們設置字體大小的時候設置的是字體的高度。
• 其實一個元素的line-height也能決定一個元素的高度。

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

當咱們設置line-height=100px時：
變成了這樣，其實這也是垂直居中的一個原理吧。

總結： 以上是我對我瞭解的一些知識點的總結，但願能夠幫到一些人，同時也讓我加深了對這些知識點的理解和認識，做爲一名自學前端的在校大學生但願大佬們指出錯誤，一塊兒探討。感謝。