清除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 */
本文作者:



相关阅读:
Prototype源码浅析 Enumerable部分之each方法
三种直接备份 WordPress 博客的方法
SQL Server连接体系结构的客户端
CSS技巧之圆角背景与三角形实现方法
CSS3按钮选择器:设计网页链接平滑的按钮
js实现的的 文字自动''到google search框
php调用js文件的方法
Windows7 快捷键大全 提高您的工作效率
数据库自我调整介绍
读jQuery之八 包装事件对象
ASP简单实现数字字符混合验证码
教你配置安全稳定的SQL Server数据库
DEFER怎么用?
使用Modello编写JavaScript类
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4