1. 外邊距摺疊
垂直方向上的兩個外邊距相遇時，會摺疊成一個外邊距，摺疊後的外邊距高度等於兩者中的較大值。
外邊距摺疊發生條件
外邊距摺疊存在兩種情況
- 兄弟外邊距摺疊
以下情況會發生外邊距摺疊
<div class="container">
<div>
<div class="block top"></div>
</div>
<div class="block bottom"></div>
</div>
- 父子外邊距摺疊
消除外邊距摺疊方法
行內盒子、浮動盒子或絕對定位盒子的外邊距不會摺疊。
- 外邊距不採用兩個相加的形式，直接設置其中一個。
- 根據BFC（block formatting context）塊級格式化上下文來阻止外邊距摺疊。
2. BFC
BFC（Block fomatting context）是一個獨立的佈局環境，其中的元素佈局是不受外界的影響，也不會影響外界，並且在一個BFC中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿着其父元素的邊框排列。
BFC的創建
- float的值不是none
- position的值不是static或者relative
- display的值是inline-block、table-cell、flex、table-caption或者inline-flex
- overflow的值不是visible
BFC的用途
- 清除元素內部浮動
只要把父元素設爲BFC就可以清理子元素的浮動了，最常見的用法就是在父元素上設置overflow: hidden樣式，對於IE6加上zoom:1就可以了。 - 解決外邊距摺疊
屬於同一個BFC的兩個相鄰盒子的margin會發生重疊，那麼我們創建不屬於同一個BFC，就不會發生margin重疊了。
運行下面代碼看結果，外邊距不會發生合併
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>防止margin摺疊</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
p {
color: #f55;
background: pink;
width: 200px;
line-height: 100px;
text-align:center;
margin: 30px;
}
div{
overflow: hidden; /*這裏新建了一個BFC*/
}
</style>
<body>
<p>看看我margin</p>
<div>
<p>看看我的 margin</p>
</div>
</body>
</html>
- 自適應兩欄佈局
普通流體元素形成BFC後，不會與浮動元素有任何交集，順着浮動邊緣形成自己的封閉上下文。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自適應兩欄佈局</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body {
width: 100%;
position: relative;
}
.left {
width: 100px;
height: 150px;
float: left;
background: orange;
text-align: center;
line-height: 200px;
font-size: 20px;
}
.right {
overflow: hidden; /*看這裏！看這裏！劃重點！劃重點！*/
height: 300px;
background: green;
text-align: center;
line-height: 300px;
font-size: 40px;
}
</style>
<body>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
</body>
</html>
如果以上代碼 right 類中沒有 overflow: hidden;，是下面的效果
現在的效果：
3. inline-block 的間距
將 display 設置爲 inline-block 是創建BFC的其中一種方式，但這種佈局會存在一個4px左右的的間隙。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>inline-block</title>
<style type="text/css">
.container a{
display: inline-block; /*看這裏！看這裏！看這裏！*/
background-color: orange;
padding: 6px;
}
</style>
</head>
<body>
<div class="container">
<a href="#">一</a>
<a href="#">二</a>
<a href="#">三</a>
<a href="#">四</a>
</div>
</body>
</html>
運行後見下圖：
解決方法
- 可以在html中直接把元素寫在一行上 或 把閉合標籤和第二個開始標籤寫在一行 或 兩行間添加註釋或直接去掉閉合標籤但最後一個不能去掉。
<div class="container">
<a href="#">一<a href="#">二<a href="#">三<a href="#">四</a>
</div>
- 設置 margin-right 爲負值，但要考慮上下文的字體和文字大小。
.container a{
display: inline-block;
background-color: orange;
padding: 6px;
margin-right: -5px; /*看這裏！看這裏！看這裏！*/
}
運行後如下圖：
