clearfix:after清除css浮动

在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看下面的例子:
<div>
<div>TESTDIV</div>
<div>CSSBBS</div>
<div>TESTDIV</div>
<div>TESTDIV</div>
<div>TESTDIV</div>
</div>
运行这段代码,大家可以看到,作为外部容器的边框为红色的DIV,没有被撑开。这是因为内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开。
我们想让外部容器的DIV随着内部DIV增多而增加高度,要怎么解决呢?

以前我都是用这样的方法来解决:
<div>
<div>TESTDIV</div>
<div>TESTDIV</div>
<div>TESTDIV</div>
<div>TESTDIV</div>
<div>TESTDIV</div>
<div></div>
</div>
我们看到,在容器DIV内要显示出来的float:left的所有的DIV之后,我们添加了这样的一个DIV:<div></div>。这样,其实就在最后增加了clear的动作。

但是,我总觉得,这么多加一个DIV有点不妥。一是多了一个没有意义的DIV,二是在用dojo做Drag&Drop的时候,由于这个DIV是容器DIV的一个字节点,如果这个节点被移动,则会造成排版上的Bug:如果要显示的蓝框的DIV被移到这个DIV之后,则因为clear:both,它会被强制换一行显示。所以,我一直在寻找更好的解决办法。

解决的办法:
首先设置这样的CSS:
CSS代码:

代码:

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
然后,我们再修改原来的HTML代码,让外部的容器DIV来使用这个CSS:
HTML4STRICT代码:

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

* html .clearfix {height: 1%;}

在Firefox里测试一下,哈哈,这样做的确很有效,显示正常,而且dojo的 Drag & Drop也不会有问题了。原来,这个clearfix的CSS使用了after这个伪对象,它将在应用clearfix的元素的结尾添加content中的内容。在这里添加了一个句号".",并且把它的display设置成block;高度设为0;clear设为both;visibility设为隐藏。这样就达到了撑开容器的目的啦。

clearfix:after清除css浮动
但是,在文章中说,WindowsIE并不支持这样做。所以要让IE也完美显示,则必须在clearfix这个CSS定义的后面加上一些专门为IE设定的HACK。CSS如下:
CSS代码:
代码:

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

* html .clearfix {height: 1%;}

因为转义字符"",Mac IE浏览器会忽略掉这段Hack,但Windows IE不会,它会应用 * html .clearfix{height: 1%;} 来达到撑开DIV容器的目的(貌似MacIE没有办法解决这个问题,不过幸好用户数量是在是太少了,Safari支持就可以了:p)。

  

爱华网本文地址 » http://www.413yy.cn/a/25101015/274218.html

更多阅读

怎样清除系统垃圾文件 怎样清除手机系统内存

Windows系统在安装使用过程中都会产生很多垃圾文件,包括一些临时文件和日志文件,要怎么清除呢?一起来看一下吧!怎样清除系统垃圾文件——方法一:自制BAT清理文件怎样清除系统垃圾文件 1、首先任意一个地方新建一个文本文档。怎样清除

如何清除电热水壶里的水垢 电热水瓶除水垢

如何清除电热水壶里的水垢——简介电热水壶的诞生,就是为大家提供安全、健康、快捷的饮用水,电热水壶设计人性化,造型美观时尚,烧水速度快,性价比高,成为当今家庭很常用的小家电之一,但电热水壶如果长时间使用,会产生水垢,不及时清理的话,会影

如何清除地址栏 如何清除地址栏记录

如何清除地址栏——简介我们上网使用浏览器浏览网站的时候会在浏览器的地址栏上面留下浏览过的网站地址。有时候不想让别人看到自己浏览过的网站地址,这时候只要删除地址栏即可。下面在经验里给大家分享一下怎样删除地址栏的方法。

怎样清除上网历史记录 清楚历史记录。

怎样清除上网历史记录——简介如果每天打开的网页多了,电脑上肯定会有一些上网记录影响电脑的运行速度,再者有时候我们上网的记录也不想让别人看到,我们如何及时清除这些上网记录呢?怎样清除上网历史记录——第一种方法怎样清除上网历

声明:《clearfix:after清除css浮动》为网友指尖凝香分享!如侵犯到您的合法权益请联系我们删除