margin重叠问题

Question

两个相邻的div元素产生margin重叠问题。

margin重叠问题既然是BFC导致的，那为什么赋予一个div overflow:hidden;属性，还是会出现margin重叠问题。

使元素产生BFC的方法不是有设置元素属性：
1.float: left | right | both;
2.overflow: hidden | auto | scroll;
3.display: table-cell | inline-block | table-caption;
4.position: absolute | fixed;
四种方法吗？

我试了下我目前我遇到的情况，只有 float、display: table-caption | inline-block以及position可以解决。

overflow和display:table-cell属性为什么不行？

Answer 1

混淆了“产生”和“所在”，一个对内，一个对外。改变 overflow 让一个 div 内部宣布新 BFC 但对外它还是在原来的 BFC 中。

Answer 2

overflow是溢出的，假如说overflow是auto，然后你的盒子都是float：left,width:无限宽，那样的话就会一直横排排列，浏览器的BFC就会被打乱。
display:table-cell是属性指让标签元素以表格单元格的形式呈现，类似于td标签，就是把盒子变成一个个的格子，意思是说打乱了父级盒子的BFC