IE多数的bug源于hasLayout属性，这个属性在IE8及以后的浏览器中被抛弃
IE7及以下版本不支持BFC
块级格式化上下文BFC#
BFC是W3C CSS 2.1
规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。
也可以说BFC就是一个作用范围。可以把它理解成是一个独立的容器，并且这个容器的里box的布局，与这个容器外的毫不相干。
BFC的规则#
1、在创建了 Block Formatting Context 的元素中，其子元素按文档流一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。
根据 CSS 2.1 8.3.1 Collapsing margins 第一条，两个*相邻的普通流中的块框*在垂直位置的空白边会发生折叠现象。也就是*处于同一个BFC中的两个垂直窗口的margin会重叠。* 根据 CSS 2.1 8.3.1 Collapsing margins 第三条，*生成 block formatting context 的元素不会和在流中的子元素发生空白边折叠。*所以解决这种问题的办法是要为两个容器*添加具有BFC的包裹容器。*
2、在 Block Formatting Context 中，每一个元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边）， 即使存在浮动也是如此（尽管一个元素的内容区域会由于浮动而压缩），除非这个元素也创建了一个新的 Block Formatting Context 。
3、Block Formatting Context就是页面上的一个隔离的独立容器，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。
4、根据 CSS 2.1 9.5 Floats 中的描述，创建了 Block Formatting Context 的元素不能与浮动元素重叠。
表格的 border-box、块级的替换元素、或是在普通流中创建了新的 block formatting context（如元素的 'overflow' 特性不为 'visible' 时）的元素不可以与位于相同的 block formatting context 中的浮动元素相重叠。
5 、当容器有足够的剩余空间容纳 BFC 的宽度时，所有浏览器都会将 BFC 放置在浮动元素所在行的剩余空间内。
6、 在 IE6 IE7 IE8 Chrome Opera 中，当 BFC 的宽度介于 "容器剩余宽度" 与 "容器宽度" 之间时，BFC 会显示在浮动元素的下一行；
在 Safari 中，BFC 则仍然保持显示在浮动元素所在行，并且 BFC 溢出容器；
在 Firefox 中，当容器本身也创建了 BFC 或者容器的 'padding-top'、'border-top-width' 这些特性不都为 0 时表现与 IE8(S)、Chrome 类似，否则表现与 Safari 类似。
经验证，最新版本的浏览中只有firefox会在同一行显示，其它浏览器均换行。
7、 在 IE6 IE7 IE8 Opera 中，当 BFC 的宽度大于 "容器宽度" 时，BFC 会显示在浮动元素的下一行；在 Chrome Safari 中，BFC 则仍然保持显示在浮动元素所在行，并且 BFC 溢出容器；在 Firefox 中，当容器本身也创建了 BFC 或者容器的 'padding- top'、'border-top-width' 这些特性不都为 0 时表现与 IE8(S) 类似，否则表现与 Chrome 类似。
经验证，最新版本的浏览中只有firefox会在同一行显示，其它浏览器均换行。
8、根据CSS2.1 规范第10.6.7部分的高度计算规则，在计算生成了 block formatting context 的元素的高度时，其浮动子元素应该参与计算。
哪些元素会形成BFC#
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
BFC在布局中的作用#
解决两元素margin重叠的问题###
要想两个相邻的元素不发生垂直方向上的margin重叠，需要将他们两定义在不同的BFC中。解决方法即在其中一个元素外包裹一层元素，再对那层包裹的元素进行BFC触发。（这里可以加入上述的css属性。）
解决由于浮动造成的重叠问题###
一般情况下，浮动元素会脱离文档流，即不占位置。它的兄弟元素会与它在左上角重叠。但是如果两个相邻元素都设置了浮动，那么意味着它们都是以BFC的规则渲染，根据上述第四条规则，BFC区域不会相互重叠，所以便能理解为什么设置浮动后元素能独占空间了。
解决容器由于拥有浮动元素造成高度塌陷的问题###
在普通容器中，如果里面有浮动元素，在不设置高度的情况下，容器是不能被撑起来的，这时候通过设置overflow：hidden把其变为BFC，那么就可以包含浮动元素了。
参考：
http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html
https://segmentfault.com/a/1190000004621361
http://www.w3help.org/zh-cn/causes/RM8002
来源：https://www.cnblogs.com/godot-blog/p/6556356.html