外邊距合併
盒子模型在嵌套的情況下，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
解決方法如下：
1、使用這種特性
例如：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 500px;
border: 1px solid #000;
margin:50px auto 0;
}
.box div{
/*margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
margin-bottom: 20px;*/
margin:20px;
}
</style>
</head>
<body>
<div class="box">
<div>外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。</div>
<div>外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。</div>
<div>外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。</div>
<div>外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。</div>
</div>
</body>
</html>
2、設置一邊的外邊距，一般設置margin-top
3、將元素浮動或者定位
margin-top 塌陷
在兩個盒子嵌套時候，內部的盒子設置的margin-top會加到外邊的盒子上（特別是想要設置內部盒子居中時），導致內部的盒子margin-top設置失敗。也只有top方向上有此bug。
解決方法如下：
1、外部盒子設置一個邊框
2、外部盒子設置 overflow:hidden
3、外部盒子使用僞元素類（推薦）：
clearfix:before{
content: '';
display:table;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.clearfix:before{
content: "";
display: table;
}
.con{
width: 300px;
height: 300px;
background-color: gold;
/*border: 1px solid; 第一種解決塌陷的方法*/
/*overflow: hidden; 第二種解決塌陷的方法*/
}
.box{
width: 200px;
height: 100px;
background-color: green;
margin-top: 100px;/*margin-top塌陷*/
margin-left: 50px;/*其他方向無塌陷*/
}
</style>
</head>
<body>
<div class="con clearfix">
<div class="box"></div>
</div>
</body>
</html>
