010BFC

在解释BFC是什么之前。需要先介绍Box, Formatting Context的概念。
　-Boxc CSS布局的基本单位
　-Box是CSS布同的对象和基本单位，直观点来说。就是一个页面是由很多个Box组成的。
　-元素的类型和display属性。决定了这个Box的类型。不同类型的Box,会参与不同的Formatting Context (-个决定如何宣染文档的容器) ，因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子:
　　-block-level box
　　　　display属性为block ,list-item, table的元素，会生成block-level box.并且参与block fomatting context (BFC):
　　-inline-level box;
　　　　display属性为inline, inline-block, inline-table 的元素，会生成inline-level box,并且参与inline formatting contex(IFC)
Formatting context
Formatting context是W3C CSS2.1规范中的一个概念。
它是页面中的一块渲染区域。并且有一套渲染规则，它决定了其子元素将如何定位。以及和其他元素的关系和相互作用。
最常见的Formatting context有Block fomatting context (简称BFC)，Inline formatting context (简称IFC)。

BFC是什么
BFC(Block formatting context)直译为“块级格式化上下文。它是一个独立的宣染区域 。只有Block-level box参与。
它规定了内部的Block-level Box如何布局。并且与这个区域外部毫不相干

BFC布局规则:
1.内部的Box会在垂直方向，一个接一个地放置。
2.BFC的区域不会与float box重动。
3.内部的Box重直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重桑
4.计算BFC的高度时。浮动元素也参与计算。(清除浮动haslayout)
5.BFC就是页面上的一个隔高的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

BFC什么时候出现(哪些元素会生成BFC?)
根元素
float属性不为none
position为absolute或fixed
overflow不为visible
display为inline-block, table-cell, table-caption, flex ,inline-flex

什么是haslayout
layout是windows IE的一个私有概念 ，它决定了元素如何对其内容定位和尺寸计算，
以及与其他元素的关系和相互作用。当一个元素“拥有布局”时，它会负责本身及其子元素的尺寸和定位。
而如果一个元素没有拥有布局”， 那么它的尺寸和位置由最近的拥有布局的祖先元素控制。
必须说明的是，IE8及以上浏览器使用了全新的显示引擎，已经不在使用haslayout属性，
因此haslayout属性只针对IE6和IE7.

为什么会有haslayout
理论上说，每个元素都应该控制自己的尺寸和定位，即每个元素都应该“拥有布局”， 当然这只是理想状态。
而对于早期的IE显示引擎来说，如果所有元素都“拥有布局”的话，会导致很大的性能问题。
因此IE开发团队决定使用布局概念来减少浏览器的性能开销，即只将布局应用于实际需要的那些元素，
所以便出现了“拥有布局”和“没有拥有布局”两种情况。

默认拥有布局的元素
html, body, table, tr, td, img, hr,
input, select, textarea, button,
iframe, embed, object, applet, marquee

怎么触发haslayout
float: left或right
display: inline block
position: absolute
width:除auto外任何值
height:除auto外任何值
zoom)除normal外任何值
writing-mode: tb-rI

在IE7中，以下属性也可以触发元素的haslayout
min-height:任意值
min-width:任意值
max-height:除none外任意值
max-width;除none外任意值
overflbw: avisible外任意值，仅用于块级元素
overflow-x:除visible外任意值，仅用于块级元素
overflow-y:除visible外任意值，仅用于块级元素
position: fixed