8.9 margin折叠更多场景
8.9.1 父元素margin0发生折叠
相邻父子margin折叠的示例里，父子元素都设置margin-top，会发生折叠。这里将父元素div1的margin-top设置成0、或者取消设置，也发生折叠。示例代码如下。
.div2 {
margin-top: 0;
background-color: #0aaa76;
width: 250px;
}
.div2-1 {
margin-top: 30px;
background-color: #4aa6fc;
height: 30px;
margin-left: 20px;
}
8.9.2 父子margin-bottom折叠
父元素与最后一个子元素的margin-bottom相邻时，也发生折叠。示例代码如下。
.div2{
margin-bottom: 20px;
}
.div2-2{
margin-bottom: 40px;
}
8.9.3 正负margin折叠计算
两个相邻margin一正一负。div2-1与div1之间的间距只有10px（30-20）。
.div2 {
margin-top: -20px;
}
.div2-1 {
margin-top: 30px;
}
8.9.4 height0自身折叠
自身margin折叠是极特殊的场景，很少出现。一个元素的高度是0，无padding与border，自己的margin-top与margin-bottom相邻，也会折叠。
示例代码如下。如果不折叠，div2占垂直间距50px，折叠后间距是30px。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin折叠 | 小步教程</title>
<style>
body {
margin: 0;
}
.div1 {
border-bottom: 1px solid #666;
}
.div2 {
margin-top: 20px;
margin-bottom: 30px;
}
.div3 {
border-top: 1px solid #666;
}
</style>
</head>
<body>
<div class="div1">div1 小步教程 xiaobuteach.com</div>
<div class="div2">
</div>
<div class="div3">div3</div>
</body>
</html>
8.9.5 其它FC与margin折叠
display-inside除flow与flow-root外，值还包括table、flex、grid。它们布局结构末级元素内部自动新建BFC，“新建BFC”表示新建并使用流式布局。新建BFC的内部多个div可能发生margin折叠。
示例代码。div2、 div2-1、div2-1-1、div2-1-2，共4个元素的3处垂直margin相邻。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<style>
.div1,.div3 {
background-color: #4aa6fc;
}
.div2 {
display: flex;
margin-top: 20px;
}
.div2-1 {
margin-top: 20px;
}
.div2-1-1{
margin-top: 10px;
margin-bottom: 20px;
}
.div2-1-2{
margin-top: 20px;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">
<div class="div2-1">
<div class="div2-1-1">第1列</div>
<div class="div2-1-2">小步教程 xiaobuteach.com</div>
</div>
<div class="div2-2">第2列</div>
</div>
<div class="div3">div3</div>
</body>
</html>
FC与margin折叠示意图
（1）根元素html新建1个BFC，flex元素（也称flex容器）div2新建1个FFC，div2-1与div2-2这2个flex子元素的内部又分别新建1个BFC，共4个FC、3个BFC。
（2）flex元素与flex子元素属于display: flex结构的对应元素，flex元素与它的子元素之间不会折叠，flex子元素与它的子元素不会折叠。所以，div2、div2-1、div2-1-1三者之间的两处相邻不会折叠。
（3）flex子元素内部的多个元素可能折叠。BFC-2内部的div2-1-1、div2-1-2发生折叠。
