SOURCE

<div class="fl">
    默认值，margin会发生重叠
	<div class="d1">margin-bottom: 20px;</div>
	<div class="d2">margin-top: 30px;</div>
</div>

<div class="fl">
    BFC解决margin重叠问题
	<div class="parent">
		<div class="d1">margin-bottom: 20px;</div>
	</div>
	<div class="d2">margin-top: 30px;</div>
</div>

.d1 {
    width: 200px;
    height: 200px;
    background-color: chartreuse;
    margin-bottom: 20px;
}

.d2 {
    width: 200px;
    height: 200px;
    background-color: red;
    margin-top: 30px;
}

.parent {
    overflow: hidden; // 触发BFC
}

.fl{
    float: left;
    margin-left: 10px;
}