<div style="background:red;">
            父元素的内容占据
            <div style="margin-bottom:20px;background:blue;">
             子元素的内容占据占据   
            </div>
        </div>
        <div style="background:yellow">
            这是下一行的内容
        </div>

　　效果如图：

　　为什么会产生这种现象呢，究其根本乃是因为BFC的外边距折叠，什么是外边距折叠呢。 BFC的外边距折叠 　　两个相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以合并成一个单独的外边距。这种合并外边距的方式被称为折叠。 什么情况下会引起外边距折叠。 触发条件： 　　必须是处于常规文档流的块级盒子，并且处于同一个BFC中。 　　没有将他们分开的东西，如padding、border、clearance。 　　在垂直方向上是相邻的，相邻的情况有以下几种 　　　　1、元素的margin-top与其第一个处于常规文档流中的子元素的margin-top 　　　　2、高度自动的元素的margin-bottom与其最后一个处于常规文档流中子元素的margin-bottom 　　　　3、元素的margin-bottom与其下一个处于常规文档流转红的兄弟元素的margin-top 　　　　4、元素的margin-top与其margin-bottom，但需满足自身没创建BFC、min-height为0、不包含正常文档流的子元素、高度为0或者auto。 解决方法： 　　要避免这个问题，可以让触发条件不成立，从而解决问题，所以有以下几种解决方法 　　　1、给父元素加高度或者设置padding值，将他们分开。 　　　2：把父元素变成一个 block formating context ，也就是新建一个BFC，根据BFC的定义，下面是可选的方法 　　　　a、float: left/right 　　　　b、position: absolute 　　　　c、display: inline-block/table-cell 　　　　d、overflow: hidden/auto 优质内容筛选与推荐>>
1、[导入]从Solstice Google题解说起
2、173
3、Aho-Corasick算法学习（转载）
4、【转载】ASP.NET Session丢失问题原因及解决方案
5、使用Web.Config Transformation配置灵活的配置文件