为什么display: inline-block产生的块格式化上下文能清除兄弟元素之间的margin重叠， 而overflow: hidden产生的块格式化上下文不能清除兄弟元素之间的margin重叠

[lyc2014]

[lyc2014]

文中的： “我们可以给div加上display: inline-block, 触每个div容器生成一个BFC。那么三个DIV便不属于同一个BFC， 就不会发生margin重叠了” 存有疑惑。 设置overflow: hidden还是会发生重叠的。 dispaly: inline-block、float和position: absolute可以清除重叠。有大神是这么解释的： 浮动元素和绝对定为元素不与其他盒子产生外边距折叠是因为元素会脱离当前的文档流， 违反了两个margin是邻接的条件。 inline-block元素不与其兄弟元素margin重叠的原因是 inline-block不符合w3c规范所说的元素必须是块级盒子的条件， 因为规范中又说明， 块级盒子的display属性必须是以下三种之一： ‘block', 'list-item', 和'table' https://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

[zuopf769]

如果将为ul使用overflow：hidden的方式，ul生成BFC不应该再发生重叠现象可是我在chrome、firefox、ie上的测试结果都有发生重叠现象。这个问题，我没找到答案，还请道友们给解答一下

[lyc2014]

@zuopf769 BFC应该是块级盒子内的规则 你文中举得例子 display: inline-block 虽然属于外层BFC 但是inline-block并不是一个块级盒子（block, list-item, table） 所以排列规则不属于BFC范围内 自然不会重叠 但是overflow: hidden的盒子 虽然盒子里面是一个BFC 但是它依然是外层BFC中的一个块级盒子 所以排列规则属于BFC范围内 所以会重叠 以上个人理解是根据此链接了解的https://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

[gzbang]

@lyc2014 这个解释很到位，比如嵌套元素产生的外边距重叠，给父级元素设置overflow:hidden,display:inline-block,float-left都可以消除外边距合并，这个很好理解。但是为什么给子元素设置display:inline-block或者float:left也可以消除外边距合并，给子元素设置overflow:hidden却不能消除外边距合并，按道理，给子元素设置，父元素和子元素仍然算在同一个BFC，之前一直不理解，现在好像突然懂了，