BFC与hasLayout之间的故事

刚拒绝了一个很有诱惑的公司，不是不想去，而是对现在的能力还不确定，希望能够进一步提高自己的技能，所有想写博客了，监督自己的学习进度·········现在还没有开放博客，希望成熟一些后再开放吧！

进入正题啦啦啦！

一、什么是BFC(Block Formatting Content)？

IE用的是hasLayout而非IE浏览器用的即是BFC（块格式化上下文）

1、BFC是W3C CSS2.1中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素之间的关系和相互作用。在创建了BFC的元素中，其子元素会一个挨着一个的放置，垂直方向上他们的起点是一个包含块的顶部，两个相邻元素的垂直距离取决于margin值，但是呢，相邻的块级元素的垂直边距会折叠（collpase）（我是这么理解的：就是设置margin：10px，但是显示是5px，不知正确否？）

2、在BFC中，每一个元素的左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边），即使存在浮动也会如此（尽管一个元素的内容区域会因为浮动而压缩）（不是很理解这个）。除非这个元素也创建了新的BFC。

3、在CSS3中对BFC有了新的定义：http://www.w3.org/TR/css3-box/#block-level0 ，CSS3中将BFC 叫做 flow root。

二、怎么才能触发BFC呢？只要满足下面其中之一的要求即可

1、float不能为none； 2、overflow（不能为visibile）； 3、display:(table-cell\table-caption\inline-block)；4、position:(任何值除了static\relative)

Tips：我们有时会用overflow：hidden去清楚浮动。就是因为它可以触发元素的块格式化上下文(IE6,7要申明zoom:1)，这个方法确实简单，但是相当粗暴。

三、什么是hasLayout？

这个属性是IE特有的，与其他浏览器没有一毛线的关系，霸道吧。说起IE就是痛啊！

1、Layout是IE浏览器渲染引擎的一个内部组成部分。在IE中，一个元素要么对自己的自身内容进行组织和计算要么就是依赖其包含块来计算和组织内容。为了协调这两种方式的矛盾，渲染引擎采用了'hasLayout'属性，属性值可以为true或者flase，当一个元素的hasLayout为true时，我们就说这个元素有一个布局（Layout），或者拥有布局，这个时候就不用依赖其包含块了而是靠自身内容。

2、在IE中，我们可以通过'hasLayout'属性可以判断一个元素是否拥有Layout。如object.currentStyle.hasLayout。

3、很多IE6下的bug都是因为没有触发hasLayout而造成的。所有我们在解决bug时候就是去触发元素的布局。

四、怎么触发元素hasLayout呢？

1、有些元素因为默认就拥有布局所以就不用触发了，如（html,body,table,th,tr,td,img,hr,input,button,select,textarea,fileldset,legend,iframe,embed,object,applet,marquee）

2、而其他元素就没有了，没有的话怎么触发呢？当然是用css去触发了，如下属性。

display:inline-block, height(除auto以外的所有值), widht(除auto以外的所有值）, float:right或left, position:absolute, writing-mode:tb-rl; zoom:（除normal外的任何值）

IE7还有一些额外的元素，如下：请看！