对hasLayout和BFC的实践思考
先说BFC|haslayout的应用场景：
1>触发BFC | haslayout可以包含内部元素的浮动（闭合浮动）；
2>触发BFC | haslayout可以阻止元素被浮动元素覆盖；
3>触发BFC | haslayout可以阻止垂直外边距折叠（合并）。
再说BFC | haslayout的触发方式：
触发BFC常用方式：
float: left | right;
position: absolute | fixed;
display: inline-block | table-cell | table-caption
overflow: auto | scroll | hidden
触发haslayout常用方式：
float: left | right
position: absolute
display:inline-block
height: (任何值除了auto)
width: (任何值除了auto)
writing-mode: tb-rl
zoom: (除normal 外任意值)
Internet Explorer 7 还有一些额外的属性(不完全列表):
min-height: (任意值)
max-height: (除 none 外任意值)
min-width: (任意值)
max-width: (除 none 外任意值)
position: fixed
overflow: (除 visible 外任意值)
说明：在上面标注橙色的部分是既能触发BFC，也能触发haslayout的属性。
当然，我们能够利用BFC | haslayout能够解决很多在实际项目中碰到的bug问题，在这里，我主要针对一个典型的应用对BFC | haslayout作以深入的应用说明。
向大家引入三个常见模型(自己总结)——图标模型、操作模型、列表模型
会发现，“图标模型”无非是作图右文的常见模型。接下来引入“操作模型”——
之所以起名为“操作模型”，源于这个模型多用于显示用户对内容的相关操作。接下来引入“列表模型”——
这里的“列表模型”，基本上指代的是ul/li的应用了，不要仅仅局限于普通列表应用ul/li(或者dl/dt/dd等)，凡是循环显示相同内容或同类型的内容的时候均可应用“列表模型”。
三个模型介绍完了，我们应用BFC | haslayout对第一个模型(图标模型)的实现做以简要分析，下面我简略概括之——
|
左部（block）
|
右部（block）
|
说明（推荐指数最大额：5）
|
|
左浮
|
右浮（BFC、haslayout）
|
父元素限定宽度或右部元素需要限定宽度
推荐分析：源于float:left|right既能触发BFC，也能触发haslayout
推荐指数：4 |
|
左浮
|
左浮（BFC、haslayout）
|
父元素限定宽度或右部元素需要限定宽度
推荐分析：源于float:left|right既能触发BFC，也能触发haslayout
推荐指数：4.5
|
|
左浮
|
对于现代浏览器，需要触发BFC（不被左部的浮动元素所覆盖）；
对于IE6/IE7，需要触发haslayout（不被左部的浮动元素所覆盖）；
思考——我们该用怎样的属性去触发这里的BFC和haslayout呢？
1>先说overflow系列，它的auto/croll/ hidden三个属性值，都有一定的表现限制，该采用哪个值需应用而定。最主要的是，它既能够触发现代浏览器的BFC，也能够触发IE7的haslayout。这种方式确实比较暴力。对于IE6的话，我们还需要用_zoom:1;这个hack来触haslayout。
2>再说display:inline-block;它既能够触发IE系列的haslayout，也能够触发非IE系列的BFC，但是，一旦右部分元素使用了这样属性，对于IE系列和非IE系列的表现是不一致的，IE系列自适应了宽度，而非IE系列没有，所以最好对该部分元素进行宽度限制。另外，还有需要解决IE6下3像素文本偏移bug，对左部元素写个hack——margin-right:-3px;
|
概括一下：
1>整合起来，我们可能要用到
overflow:hidden;（触发现代浏览器的BFC，并触发IE7的haslayout）
_zoom:1;(触发IE6的haslayout)这个组合来限定右部元素。这样，右部元素就可以自适应宽度了，这一点是对比前两点的优势所在。不过，多了个hack还是很不爽，overflow系列的应用具有一定限制，我们最好避免之。
推荐指数：4
2>如果用了display:inline-block; 能够触发IE系列的haslayout，也能够触发现代浏览器的BFC，看起来不错，但是还是要写点儿hack的，右部还是需要限定宽度的。
推荐指数：4
3>其他的触发BFC | haslayout的组合就不谈了。不常用。
|
|
左浮
|
margin-left:左部元素的宽度;
这个方式是我个人比较喜欢的，除了3像素文本偏移bug外，其他都不用考虑，何乐而不为呢。
|
推荐指数：4.5
|
|
display:inline-block
|
右浮（BFC、haslayout）
|
推荐指数：3
|
|
display:inline-block
|
display:inline-block;
这所导致的空白间隙，解决起来真是令人头痛，我可不希望通过通过改变文档结构来解决这个问题（一切以牺牲结构来兼容表现的行为都是耍流氓！）。 |
推荐指数：2
|
|
position: absolute
|
position: absolute; （BFC、haslayout）
|
不常用
推荐指数：1
|
|
……
|
……
|
……
|
如果你看懂了这篇文章，希望你对BFC和haslayout有更加深刻的认识。
