css bfc元素在chrome和火狐上表现的差异？

Question

demo在这里：https://jsfiddle.net/mqu7jqrr/
chrome上：

火狐上：

div3元素（bfc元素）为什么没有跟着div2（浮动元素）后边，形成浮动布局呢？

Answer 1

产生不一样的展示效果的核心在于两者对于overflow的处理方式不一样而形成的。

规范的要求是这样的http://www.w3help.org/zh-cn/k...

浮动元素、绝对定位元素，'display' 特性为 "inline-block"，"table-cell"， "table-caption" 的元素，以及 'overflow' 不是 "visible" 的元素，会创建新的块格式化上下文。

但是webkit内核...http://www.phpddt.com/dhtml/7...

参考1：WebKit 内核浏览器中，当使用脚本对拥有 'float' 特性以及 'overflow' 特性值不为 'visible' 特性的布局进行变更盒模型操作后，Chrome Safari 的 Reflow 计算会出现偏差，导致之后的 Repaint 操作时，无法渲染出布局内容。

参考2：对于overflow:hidden的最大误解时：当一个具有高度和宽度中至少一项的容器应用了overflow:hidden时，其内部的任何溢出的内容都将被剪裁（隐藏）。 但事实确实如此吗？答案是“未必”！事实是拥有overflow:hidden样式的块元素内部的元素溢出并不总是被隐藏，具体来说，需要同时满足以下条件：
1.拥有overflow:hidden样式的块元素不具有position:relative和position:absolute样式；
2.内部溢出的元素是通过position:absolute绝对定位；

参考3：属性(overflow)规定，当一个块元素容器的内容溢出元素的盒模型边界时是否对其进行剪裁。它（此属性）影响被应用元素的所有内容的剪裁。但如果后代元素的包含块是整个视区（通常指浏览器内容可视区域，可以理解为body元素）或者是该容器（定义了overflow的元素）的父级元素时，则不受影响。