w3ctech

更加直观地了解hasLayout和BFC

本文由小豪编写

网络上有很多关于hasLayout和BFC相关的文章，但是大部分都显得有些晦涩难懂。所以想用一些比较直观的例子来说明hasLayout和BFC给平时的布局带来的影响。

基础知识

在讲hasLayout和BFC之前，先简单地过一下元素布局的一些基本知识。

元素本身的布局方式可以从display上表现出来

  • block，对应块级元素
  • inline，对应行内元素
  • inline-block
  • none

当然，还有更多的一些属性，我们只提及主要部分。

块级元素，在浏览器中通常是垂直布局，然后可以用margin来控制块级元素之间的间距，并列和嵌套的块级元素都存在外边距，也就是margin合并的问题。

而行内元素是以水平的方式布局，垂直方向的margin，padding都是无效的，并且设置的宽高也是无效的。

BFC的全名是block formatting context，翻译成中文就是块级元素格式上下文，听起来有些别扭，字面上的意思大概就是一个元素的布局上下文类型。

而大家应该对hasLayout已经很熟悉了，更多可能是因为IE5.5/6/7上一些奇怪的bug（还有处于quirks模式下的IE8）。

BFC和hasLayout是作为元素的一种隐藏属性存在，并且一旦触发之后就不可逆转。他们之间有很多共同点。（注：没有办法设置hasLayout=false， 除非把一开始那些触发hasLayout的CSS属性去除，此处是我没有表达好，谢谢@貘吃馍香指正）

共同点

1.不和浮动元素重叠

如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个覆盖的现象，很多自适应的两栏布局就是这么做的。

这里我们使用msdn上的一个例子，来说明haslayout和BFC对这个情况的影响。

<div style="float:left; border: 2px solid red"> 123</div>
<span style="border: 2px solid blue">
     The quick brown fox jumped over the lazy dog's back.
     The quick brown fox jumped over the lazy dog's back. 
     The quick brown fox jumped over the lazy dog's back.
     The quick brown fox jumped over the lazy dog's back. 
     The quick brown fox jumped over the lazy dog's back.
</span>​

我们可以看到，文字环绕着浮动元素进行布局。

文字环绕浮动元素

但是如果我们用overflow:hidden和zoom:1，分别触发BFC和hasLayout，那么，结果会是如何呢？

加上触发条件的代码如下

<div style="float:left; border: 2px solid red"> 123</div>
<span style="border: 2px solid blue;display:block;overflow:hidden;*zoom:1">
     The quick brown fox jumped over the lazy dog's back.
     The quick brown fox jumped over the lazy dog's back. 
     The quick brown fox jumped over the lazy dog's back.
     The quick brown fox jumped over the lazy dog's back. 
     The quick brown fox jumped over the lazy dog's back.
</span>​

结果如下图，点此查看demo

文字不环绕

那么，实际开发中，这个特性可以用于解决什么问题呢？

比如百度知道（http://zhidao.baidu.com/）首页右栏有一个本周知道之星

demo

结构也很简单，就是

<img/>
<div>
 <h4>天涯魔鬼训练营</h4>
 <p>大将军 十八级</p>
</div>

他给img和div分别加了float:left来解决左右栏排版的问题。

但是，假设（仅仅是假设）描述部分多了几个字，就变成了这样

demo

实际情况中不应该存在那么高的等级，但是至少，我们有办法提供布局的容错性。

那么，如果我们将img设置float，div不设置float，效果就变成了这样：

demo

我多加了几个字，显得有些夸张，很明显，结果依然不是我们想要的。

我们想要的结果应该是这样。

demo

怎么样才能在文字长度不可控的情况下，保证布局的稳定性呢？

再回到之前讲的共同点1，你应该知道怎么解决这个问题了。

点此查看demo

当然，还有更多应用的场景

例如一个简单的三栏布局，左右两栏定宽，中间部分自适应，点此查看demo。

2.清除元素内部浮动

点此查看示例

在示例中，我们可以看到outer元素在设置overflow:hidden和zoom:1之后，元素内部浮动对外部的影响被清除。也就是我们最常用的清除浮动在IE5.5/6/7上生效的原理。

.k2-fix-float:after{
 content:"\0020";
 display:block;
 height:0;
 clear:both;
}
.k2-fix-float{
 *zoom:1;
}

3.嵌套元素边距折叠问题的解决

点此查看demo

不同点

1.hasLayout的元素被限制为一个矩形

触发haslayout的元素是可以设置宽高的，而触发BFC的元素不一定可以设置宽高，比如一个行内元素，设置float或者设置overflow都可以触发BFC，但是前者可以设置宽高，后者却不能，但是仔细考虑一下，给一个行内元素设置overflow:hidden还是一见比较扯蛋的事情。

点此查看demo

2.hasLayout的元素设置display:inline后与inline-block行为类似

该特性在IE6/7下解决inline-block问题时也有遇到

.k2-inline-block{
 display:-moz-inline-stack;
 display:inline-block;
 *display:inline;
 *zoom:1;
 vertical-align:middle;
 position:relative;/* 解决因为父容器{display:inline;}问题导致Firefox中li里面的链接不可点的bug */
 _position:static;/* 解决因为IE6中因为上一行代码带来在{position:relative}容器中移位在bug */
}

这个状态下的元素和普通文字一样在水平方向连续排列，受vertical-align的影响，并且可以按照容器大小自适应调整。

更多补充

BFC和hasLayout在实际开发中还是要分为两个内容分别看待，特别是haslayout这个属性，按照现在的状况，它带来的困扰还是蛮大的。

hasLayout相关的问题列几个，更多可以看最后的参考文献：

  1. 浮动元素的宽度自适应问题
  2. 相对定位元素本身不会触发hasLayout，但是在刷新页面，调整窗口，滚动页面，选中内容的时候，会出现内容消失或者错误，因为IE在设置相对定位元素之后，如果需要做偏移处理等等，会忘了告诉其子孙元素进行“重绘”。
  3. 绝对定位元素如果没有触发hasLayout带来的问题
  4. 滤镜是只适用于hasLayout的元素的

参考资料

本文所用到的CSS解决方案来自口碑网K2框架，详细可以访问 https://github.com/f2e/k2，K2框架改进自YUI3，作为口碑网前端、前后端的解决方案。

w3ctech微信

扫码关注w3ctech微信公众号

共收到1条回复