浮动层自动适应高度

网络整理 - 07-27

在网页制作中经常会用到浮动。用了浮动就会涉及到一个清除浮动的问题,因为包含浮动的元素是不会自动适应高度的,也就是不会被浮动元素撑开。
先看一个例子:

HTML:

> >

CSS:

ul             ul li                 

                zoom

而非 IE 浏览器不支持这个属性。所以第一种方法需把浏览器分为两个阵营:IE 和 非IE。
对于非 IE 浏览器需要用到一个伪类 :after (IE 浏览器不支持)。CSS 代码如下:

ul            

:after 伪类用于向元素后面插入一段内容,即 content 属性。然后在这个插入的内容里清除浮动,我们可以想象成在最后一个 <li> 后面插入了一个 <span>.</span>里面的内容是一个”.”,然后设置display:block; clear:both; height:0; 等属性 (这个比喻不一定准确)。
我们看下在 Firefox 下面的效果:

可以看到 ul 已经自动伸长了,但下面有个小小的黑点。相信你已经猜到了,这个黑点对应的就是 content:”.” 。
这个黑点肯定是要去掉的啦,我们可以用 font-size:0;line-height:0; 将其去掉。
好了,现在在两个阵营的浏览器里都实现目标了。以下是 ul 所有的CSS代码:

ul                 zoomul                    

第二种方法

我刚说过不止一种方法可以解决,那现在就来说说第二种方法。第二种方法还要更简单一些。同样,需要将浏览器分成两个阵营。不过和上一个有所不同,这一次 IE7 站到了另外一个阵营。即 IE7, Firefox, Opera, Safari 等(这里暂时称为A浏览器)。对于这些浏览器,只要定义一个 overflow:auto; 即可,但是对于 IE6 和 IE5 (称为B浏览器)却不起作用。不过要 IE6,IE5 听话也很简单。只要定义一个高度即可,哪怕是 0 ,也会自动伸长。知道这些还没用,我们还得区分这两个阵营的浏览器才行。怎么区分呢?
A 浏览器支持属性选择符,而B浏览器不支持。

所以以下代码只有A浏览器才会执行。

需要注意的是HTML 必须要有< !DOCTYPE >头部以及<html>有xmlns属性才会起作用。不过这个问题似乎不大,现在绝大部分网页都有这两个东东,包括 Dreamweaver 默认新建的网页都会自动加上。

而对于B浏览器则可以通过以下方式:

%xmlnshtml ul %;}

现在既然有两种方法,那么那一种更好呢?我个人比较喜欢第二种方法。原因很简单,代码更少,而且是符合标准的。只是在极少数情况下会出现滚动条,所以应该这两种方法配合使用。

还有,这些代码是可以通用的,可以提取为一个类比如 .clearfix 。这个任务就交给你自己完成吧。