带大家深入了解浮动布局(2)_建站学-个人建站指南,网页制作,网站设计,网站制作教程

在前面的学习中我们说了float的初衷和浮动带来的一些实际本质的问题。聪明的css开发者利用css的占位特性进行布局，的确起到了一些很好的效果，

但是也会带来一些实际的问题。比如浮动后没有高度，高度为0.这个现象，请广大的css开发者留意。不然可能出现一些很莫名奇妙的问题。

如何解决这个问题呢？亦即清除浮动

有2种方式：

1）使用伪对象（不用增加新的标签），代码如下：

.clearfix:after{content:".";display:block;height:0;clear:both,visibility:hidden}

.clearfix{ zoom:1}

首先来分析一下第一行代码的意思：

关于content

content 翻译成中文就是内容的意思，它在css2.1就被引入了。它可以使用:before 和:after来生成内容。此属性支持的浏览器有(ie8,9(ie6,7是不支持的), chrome2+,firefox1.5+)

我们这里写了一个demo，你可以试试，代码如下：

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
     <style type="text/css">
    .test1:before{
     content:'before的测试显示'
     }
    .test1:after{
    content:'before的测试显示'
    }
     .test2:after{
    content:'before的测试显示'
    }
     </style>
    <title></title>
</head>
<body>
    <div class="test1" ><span style="color:blue;background:red">百度</span></div>
    <div class="test2" >百度空间</div>
</body>

效果如下图：

由于根据不同的标签，可display可能是inline元素，所以这里设置成 block，并将高度设为0，清除左右浮动。不可见。这样可以解决ie8+ 和firefox，chrome的问题。

ie6,7呢，我们可以使用下面一行代码来触发layout来解决。

2)增加新的标签

在包裹元素的最后一个子节点后面添加一个标签

这里是w3c推荐的方法。

我们比较推荐第一种做法。

(责任编辑：admin)

搜索

热门标签:

带大家深入了解浮动布局(2)