共计 1403 个字符，预计需要花费 4 分钟才能阅读完成。
前言：边界属性 margin 是盒子与盒子之间的间距，一定要记住这个前提。
BFC
满足下列条件之一就可触发 BFC(IE 的触发需要再额外增加 zoom: 1)
根元素，即 HTML 元素
overflow 的值不为 visible
设置 border
float 的值不为 none
display 的值为 inline-block、table-cell、table-caption
position 的值为 absolute 或 fixed
边界值重叠
两个相邻的块级元素之间的 margin 边界值会互相重叠。如：第一个 div 的 margin-bottom 和第二个 div 的 margin-top 区域会重叠，只显示最大值。(其实说实在的，应该没人会这么写，毕竟直接设置一个盒子的的边界值就可以了。但是这个还是需要注意的。)
<style>
.wrapper{background: yellow;}
.text{margin-bottom: 100px; background: #00b000}
p{background: yellowgreen; margin-top: 100px;}
</style>
<div></div>
<div></div>
解决方法：其中一个 div 增加子元素，并设置 overflow 的值不为 visible(触发 BFC 的元素都可以解决, 根据样式需求选择合适的方法即可)，然后子元素设置边界值。
<style>
.wrapper{background: yellow; border: 1px solid #cccccc}
.text{margin-bottom: 100px; background: #00b000}
p{background: yellowgreen; margin-top: 100px;}
</style>
<div class=”wrapper”>
<div class=”text”> 测试 </div>
</div>
<div class=”last”> 测试 </div>
边界值无效, 第一个子元素的 margin-top 和最后一个子元素的 margin-bottom 越界问题 (重点)
<style>
ul{
background: #00b000;
}
ul li{
padding: 10px;
margin-bottom: 100px;
background: yellow;
}
</style>
<ul>
<li> 测试 </li>
<li> 测试 </li>
<li> 测试 </li>
<li> 测试 </li>
</ul>
解决方法：通常情况下，我们会选择给 li 一个边界 top 或者 bottom 来分割开每个 li 之间的间隔，但是你会发现，第一个子元素的 margin-top 和最后一个子元素的 margin-bottom 不会产生跟 ul 之间的间距，会出现越界。其实一样的处理。
<style>
ul{
background: #00b000;
overflow: auto;
}
ul li{
padding: 10px;
margin-bottom: 100px;
background: yellow;
}
</style>
<ul>
<li> 测试 </li>
<li> 测试 </li>
<li> 测试 </li>
<li> 测试 </li>
</ul>
ps: 在以前蠢蠢的不知道的时候，有时候会通过给 ul 增加 padding-bottom, 然后给最后一个 li 去除 margin 类似这样，虽然这样可以解决，但是不推荐。如果 li 与 ul 的边界值大于会小于 li 之间的间距时，可以根据情况重新设置首尾边界的具体值。
