技術標籤：html5

1. 面試題—雙邊距（邊距重疊）

1. 什麼是邊距重疊？
2. 什麼情況下會發生邊距重疊？
3. 如何解決邊距重疊？
   **邊距重疊**： 兩個box如果都設定了邊距，那麼在垂直方向上，兩個box的邊距會發生重疊，以絕對值大的那個為最終結果顯示在頁面上。

有兩種邊距重疊的情況：

1. 父子關係的邊距重疊

父子關係，如果子元素設定了外邊距，在沒有把父元素變成BFC的情況下，父元素也會產生外邊距

給父元素新增 overflow：hidden
這樣父元素就變為 BFC，不會隨子元素產生外邊距

<style>
.out {
background-color: #f00;
width
 
: 200px;
height: 200px;
}

.inner{
margin-top: 50px;
width: 100px;
height: 100px;
background-color: blue;
}   
</style>
<div class="out">
    <div class="inner"></article>
</div>

2.同級兄弟關係的重疊：

同級元素在垂直方向上外邊距會出現重疊情況，最後外邊距的大小取兩者絕對值大的那個

可通過新增空元素或偽類元素，設定overflow:hidden;解決margin重疊問題

2. 回答邊距重疊—BFC

什麼是BFC？

BFC就是塊級格式化上下文的意思，BFC是一塊獨立的佈局環境，保護其中內部元素不收外部影響，也不影響外部。本身BFC是一種css的佈局方式，只是我們可以利用它來解決外邊距摺疊的問題，BFC並不是專門用來解決這個問題而創的；

如何觸發BFC？
在box屬性值為這些的情況下，都會讓所屬的box產生BFC。

• overflow: auto/ hidden;
• position: absolute/ fixed;
• float: left/ right;
• display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

也可以用排除法：

overflow的值不是visible；
position的值不是static或relative
float的值不是none
display的值是inline-block 或 table-cell 或 flex 或 table-caption 或
inline-flex