对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有更加深刻的认识。