当前位置导航:炫浪网>>网络学院>>网页制作>>HTML与CSS教程

清除DIV浮动-使用:after

特点:不需要另外加个清除DIV.

:after(伪对象)--设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,所以并不影响到IE/WIN浏览器。
CSS

.wrapfix:after {

    content: "."; 

    display: block;

    height: 0; 

    clear: both; 

    visibility: hidden;

} 

设display:block;应用到:after 元素,因为display的默认值是"inline", 不能收到clear的特性,同时将清除容器的高度设为零,height:0;,可见度为隐藏.这是没有清除过浮动的.非Ie 浏览器看不到wrap的背景和边框.

运行代码框

  [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

这是清除过浮动的.非Ie 浏览器看到wrap的背景和边框.

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行] 

 [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

为了适应各个浏览器,我们还需要加上以下代码.

.wrapfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .wrapfix {height: 1%;}
.wrapfix {display: block;}
/* End hide from IE-mac */
相关内容
赞助商链接