清除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 */
本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3