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