CSS中BFC与浮动的搞基

Question

css BFC和浮动搞起基来还真是难懂，话不多说，直接上demo
1、

代码：

<div class="demo-block">
     <div style="float: left; width: 100px; height: 50px; margin: 50px;">float left <br>margin: 50px;</div>
     <div style="overflow: hidden; width: 200px; height: 50px; margin: 50px 0 50px 60px;">overflow hidden <br>margin: 50px 0 50px 60px;</div>
</div>

左边的div称为A，右边的称为B。

疑惑：既然 A 脱离了常规文档流，B 的左外边距必须足够 >= A.width + A.marginRight 才起作用。那为什么 B 还能认出 A 来，并且紧接在 A 的 margin box 右侧。

2、

代码：

<div class="demo-block">
    <div style="float: left; width: 100px; height: 50px; margin: 50px;">float left <br>margin: 50px;</div>
    <div style="display: inline-block; width: 200px; height: 50px; margin: 50px 0 50px 60px;">display inline-block <br>margin: 50px 0 50px 60px;</div>
</div>

疑惑：A 和 B 还发生了 margin 折叠？？

w3cplus中有一篇文章，里面说到

浮动和绝对定位不与任何元素产生 margin 折叠

这与demo2是否冲突？

好难理解，希望前辈们能不吝赐教！

Answer 1

第一个问题，脱离文档流只是一个比较形象的说法，它其实并没有真正完全脱离出来，还是会影响后面的元素。如果后面跟着一个普通的块级元素，则块级元素是会占据浮动元素原来的位置，就这一点上，比较形象的说法就是“脱离文档流”。但对于内敛元素，它会环绕浮动元素。对于触发BFC的元素，它也不受浮动元素的影响。

第二个问题没太明白你说啥。margin合并只会发生在垂直方向，水平方向永远都不会有margin合并的。