浮动层自动适应高度伸长变高

在网页制作中经常会用到浮动。用了浮动就会涉及到一个清除浮动的问题,因为包含浮动的元素是不会自动适应高度的,也就是不会被浮动元素撑开。
先看一个例子:
HTML:
<ul>
<li></li>
<li></li>
</ul>
CSS:
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
}
ul li {
width:100px;
height:100px;
float:left;
margin-right:10px;
background-color:#99cc00;
}
在各个浏览器中的效果一致:
可以看到,外面 ul 即蓝色的区域高度为0,如果没有设置 padding,这个 ul 是看不到的。当然要让它伸长也很简单,只需要在最后一个 li 后面加一个标签清楚下浮动就可以了。不过这样的话就改变了HTML结构,不好。现在这里要讨论的就是如何在不改变结构的情况下让 ul 自动伸长。
注意:自动伸长针对的是包含浮动元素的元素(这里是 ul)。而不是浮动元素自身(li)。
第一种方法:
IE 支持一个 CSS 属性 zoom, 这个元素接受一个数字或一个百分数,表示这个元素放大(缩小)的比例。例如:zoom:0.5或zoom:50% 表示缩小一半,而zoom:2或zoom:200%则表示放大一倍。
当定义了这个属性之后在 IE 浏览器里面就会自动适应高度了。当应用了这个属性之后,IE 就会自动伸长了。一般情况下我们不需要放大或缩小,所以定义 zoom:1 就行了。现在的 CSS:
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
zoom:1; /* IE */
}
而非 IE 浏览器不支持这个属性。所以第一种方法需把浏览器分为两个阵营:IE 和 非IE。
对于非 IE 浏览器需要用到一个伪类 :after (IE 浏览器不支持)。CSS 代码如下:
ul:after {
content:".";
display:block;
clear:both;
height:0;
}
:after 伪类用于向元素后面插入一段内容,即 content 属性。然后在这个插入的内容里清除浮动,我们可以想象在最后一个 <li> 后面插入了一个 <span>.</span>里面的内容是一个”.”,然后设置display:block; clear:both; height:0; 等属性(这个比喻不一定准确)。
看下在 Firefox 下面的效果:
你可以看到 ul 已经自动伸长了,但下面有个小小的黑点。相信你已经猜到了,这个黑点对应的就是 content:"." 。
这个黑点肯定是要去掉的啦,我们可以用 font-size:0;line-height:0; 将其去掉。
好了,现在在两个阵营的浏览器里都实现目标了。以下是 ul 所有的CSS代码:
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
zoom:1;/* IE */
}
ul:after {
content:".";
display:block;
clear:both;
height:0;
font-size:0;
line-height:0;
}
第二种方法
我刚说过不止一种方法可以解决,那现在就来说说第二种方法。第二种方法还要更简单一些。同样,需要将浏览器分为两个阵营。不过和上一个有所不同,这一次 IE7 站到了另外一个阵营。即 IE7, Firefox, Opera, Safari 等(这里暂时称为A浏览器)。对于这些浏览器,只要定义一个 overflow:auto; 即可,但是对于 IE6 和 IE5 (称为B浏览器)却不起作用。不过要 IE6,IE5 听话也很简单。只要定义一个高度即可,哪怕是 0 ,也会自动伸长。知道这些还没用,我们还得区分这两个阵营的浏览器才行。怎么区分呢?
A 浏览器支持属性选择符,而B浏览器不支持。
所以以下代码只有A浏览器才会执行。
[xmlns] ul { /* html[xmlns] ul 的简写 */
overflow:auto;
}
需要注意的是HTML 必须要有< !DOCTYPE >头部以及<html>有xmlns属性才会起作用。不过这个问题似乎不大,现在绝大部分网页都有这两个东东,包括 Dreamweaver 默认新建的网页都会自动加上。
而对于B浏览器则可以通过以下方式:
* html ul {
height:1%;
}
其实 height 完全可以写成 0,为什么要写1%呢?告诉你其实我也不知道,大家都这么写。
好了,第二种方法的 ul 全部样式代码如下:
ul {
margin:0;
padding:10px;
list-style:none;
background-color:#006699;
}
[xmlns] ul { /*html[xmlns] ul 的简写*/
overflow:auto;
}
* html ul {
height:1%;
}
现在既然有两种方法,那么那一种更好呢?我个人比较喜欢第二种方法。原因很简单,代码更少,而且是符合标准的。只是在极少数情况下会出现滚动条,所以应该这两种方法配合使用。
还有,这些代码是可以通用的,可以提取为一个类比如 .clearfix 。这个任务就交给你自己完成吧。

Need a translation service?

Please enter your personal details and we will contact you shortly

Words translated by CCJK

146,096,379

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00

Over 95% of our clients recommend our language services to others

Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP