li浮动时ul自动适应高度方法

MauerSu

浏览: 514561 次
性别:
来自: 北京

最近访客更多访客>>

ahua186186

stevenyj

xutao2811

zaghost

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML
CSS

源：http://blog.micxp.com/index.php/archives/61/
评：
在网页制作中经常会用到浮动。用了浮动就会涉及到一个清除浮动的问题，因为包含浮动的元素是不会自动适应高度的，也就是不会被浮动元素撑开。

先看一个例子：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MicXP系统爱好者</title>
    <style>

    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;
    }
    </style>
    </head>
    <body>
    <ul>
        <li></li>
        <li></li>
    </ul>
    </body>
    </html>

可以看到，外面 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%;
    }

标签: 自适应高度

分享到：

CSS网页布局教程:绝对定位和相对定位 | 标准流,非标准流,盒子模型

2013-12-22 22:36
浏览 1348
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论