昨天刚刚面试完，记起来被问到的一个问题。
存在两个左浮动元素，并且为它们设置左右margin，此时左边的浮动元素的右margin会和右边的左margin重合吗？
当时就懵比了。但是我回答的是会。本能的认为。 然后又被问，那垂直设置margin呢？我回答也是会。 我们现在可以来看一下
<div>float1</div> <div>float2</div> div { float: left; background-color: deeppink; margin: 0 5px; }显然是不重叠的。 至于上下margin 上下margin是不重叠的
《精通css》一书里写道，只有普通文档流中块框的垂直外边距才会发生外边距叠加，行内框，浮动框或绝对定位框之间的外边距不会叠加.
因此呢，上述的两个div都是float的，按上面所说，当然不会叠加。还有，垂直外边距才会叠加，就算是普通文本流上，水平外边距也不会叠加。
那为什么垂直方向会发生堆叠呢？这又跟BFC有什么关系？ 满足下列条件即可触发BFC 可以看到，HTML也是一个BFC。再看BFC的布局规则 注意第2条，也就是说同属于同一个BFC的两个相邻的box垂直margin会发生堆叠。 刚刚两个浮动元素也属于同一个BFC啊，为什么不发生堆叠呢？ 这是因为BFC只规定了box-level的布局方式。
刚刚说了，在同一个BFC下的两个相邻的box垂直方向的margin会发生堆叠。所以如果两个box不属于同一个BFC就不会发生堆叠了。 这个地方我自己也懵了很久，演示一下比较好理解。
<div>box1</div> <div>box2</div> body{ margin: 0; padding: 0; } div { background-color: deeppink; margin:hEast) }如我们所想，发生了堆叠。 那么如何不发生堆叠呢，我一开始是这样想的，将box2的样式设置为overflow:hidden;不就好了。这样box2 就属另一个BFC啦。 于是我就这样做了，看看结果。
body{ margin: 0; padding: 0; } div { background-color: deeppink; margin: 5px 0; } .box2 { overflow: hidden; }一点没变。 看了很多讲解，终于明白隶属于不同BFC是什么意思了——要是两个box属于不同BFC！ 我刚刚的做法，只是让box2成为一个新的BFC，而没有让box1和box2属于两个不同的BFC内啊。 所以正确的做法是，给box2包一层div，给这层div触发BFC，这样box2就处于div这个新的BFC中，而box1还在html这个BFC中，自然margin不会折叠。
<div>box1</div> <div class="wrap"> <div>box2</div> </div> body{ margin: 0; padding: 0; } .wrap { overflow: hidden; background-color: white; } div { background-color: deeppink; margin: 5px 0; }待更新~
