CSS 清除浮动方法与 BFC, haslayout 讲解-让你明白

分类：编程 | 2016-02-25 16:32:06

1.清除浮动的原理——了解 hasLayout 和 Block formatting contexts ；

2. 问题的原因与浮动定位有关。

在CSS规范中，浮动定位不属于正常的页面流（page flow），是独立定位的。所以，只含有浮动元素的父容器，在显示时不考虑子元素的位置，就当它们不存在一样。这就造成了显示出来，父容器好像空容器一样。

先看一下清理浮动的各种方法：

3.解决方法一：添加空元素

经典的解决方法，就是在浮动元素下方添加一个非浮动元素。

代码这样写：

<div>

</div>

原理是父容器现在必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容器就把所有子元素都包括进去了。这种方法比较简单，但是要在页面中增加冗余标签，违背了语义网的原则。

4.解决方法二：浮动的父容器

另一种思路是，索性将父容器也改成浮动定位，这样它就可以带着子元素一起浮动了。

</div>

这种方法不用修改HTML代码，但是缺点在于父容器变成浮动以后，会影响到后面元素的定位，而且有时候，父容器是定位死的，无法变成浮动。

5.解决方法三：浮动元素的自动clearing

让父容器变得可以自动"清理"（clearing）子元素的浮动，从而能够识别出浮动子元素的位置，不会出现显示上的差错。

要做到这点，只要为父容器加上一条"overflow: hidden"的CSS语句就行了。代码这样写：

</div>

这种方法的缺点主要有二个，一个是IE 6不支持，另一个是一旦子元素的大小超过父容器的大小，就会出显示问题。

6.解决方法四：能不能通过CSS语句添加子元素呢，这样就不用修改HTML代码了？

回答是可以的，我们知道CSS语句中有一个:after伪选择符，就可以在父容器的尾部自动创建一个子元素，这正好符合我们的需要。

下面的代码参照了lifesinger的写法：

.clearfix:after {

content: "\0020";

display: block;

height: 0;

clear: both;

}

"clearfix"是父容器的class名称，"content:"\0020";"是在父容器的结尾处放一个空白字符，"height: 0;"是让这个这个空白字符不显示出来，"display: block; clear: both;"是确保这个空白字符是非浮动的独立区块。

但是，:after选择符IE 6不支持，也就是说上面的这段代码在IE 6中无效，这怎么办？

我们添加一条IE 6的独有命令"zoom:1;"就行了，这条命令的作用是激活父元素的"hasLayout"属性，让父元素拥有自己的布局。IE 6会读取这条命令，其他浏览器则会直接忽略它。

7.最终代码

.clearfix:after {

content: "\0020";

display: block;

height: 0;

clear: both;

}

.clearfix {

zoom: 1;

}

8.附录什么是hasLayout

IE使用Layout概念来控制元素的尺寸和位置。如果一个元素有Layout，它就有自身的尺寸和位置；如果没有，它的尺寸和位置由最近的拥有布局的祖先元素控制。

在默认情况下，拥有Layout的元素包括：

<img>

<hr>

（注意，<p>和<div>默认不拥有Layout。）

凡是具有以下CSS属性的元素，也会拥有布局：

position: absolute

float: left|right

display: inline-block

width: any value other than 'auto'

height: any value other than 'auto'

zoom: any value other than 'normal' （IE专用属性）

writing-mode: tb-rl（IE专用属性）

overflow: hidden|scroll|auto（只对IE 7及以上版本有效）

overflow-x|-y: hidden|scroll|auto（只对IE 7及以上版本有效）

hasLayout是IE特有的属性，不是CSS属性。可以用Javascript函数hasLayout查看一个元素是否拥有Layout。如果有，这个函数就返回true；否则返回false。hasLayout是一个只读属性，所以无法使用Javascript进行设置。

小结

通过对比，我们不难发现，其实以上列举的方法，无非有两类：

其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；

其二，通过设置父元素 overflow 或者display：table 属性来闭合浮动，我们来探讨一下这里面的原理。

在CSS2.1里面有一个很重要的概念，但是国内的技术博客介绍到的比较少，那就是 Block formatting contexts （块级格式化上下文），以下简称 BFC。

CSS3里面对这个规范做了改动，称之为：flow root，并且对触发条件进行了进一步说明。

那么如何触发BFC呢？

float 除了none以外的值

overflow 除了visible 以外的值（hidden，auto，scroll ）

display (table-cell，table-caption，inline-block)

position（absolute，fixed）

fieldset元素

需要注意的是，display:table 本身并不会创建BFC，但是它会产生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以创建新的BFC，换句话说，触发块级格式化上下文的是匿名框，而不是 display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的。

fieldset 元素在目前没有任何有关这个触发行为的信息，直到HTML5标准里才出现。有些浏览器bugs（Webkit，Mozilla）提到过这个触发行为，但是没有任何官方声明。实际上，即使fieldset在大多数的浏览器上都能创建新的块级格式化上下文，开发者也不应该把这当做是理所当然的。CSS 2.1没有定义哪种属性适用于表单控件，也没有定义如何使用CSS来给它们添加样式。用户代理可能会给这些属性应用CSS属性，建议开发者们把这种支持当做实验性质的，更高版本的CSS可能会进一步规范这个。

CSS 清除浮动 方法 与 BFC, haslayout 讲解-让你明白

CSS 清除浮动方法与 BFC, haslayout 讲解-让你明白