清除DIV浮动－使用:after

2009-12-16 02:07| 发布者: admin| 查看: 21| 评论: 0|原作者: 冰淇淋

特点：不需要另外加个清除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的背景和边框.
运行代码框

清除浮动--使用:after--Clearing

清除浮动--使用:after

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

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

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

CSS


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

设display:block;应用到:after 元素，因为display的默认值是"inline",
不能收到clear的特性，同时将清除容器的高度设为零，height: 0；，可见度为隐藏

left

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
这是清除过浮动的．非Ie 浏览器看到wrap的背景和边框．
运行代码框

清除浮动--使用:after--Clearing

清除浮动--使用:after

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

这是清除过浮动的．非Ie

浏览器看到wrap的背景和边框．

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

CSS


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

设display:block;应用到:after 元素，因为display的默认值是"inline",
不能收到clear的特性，同时将清除容器的高度设为零，height: 0；，可见度为隐藏

left

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

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]
为了适应各个浏览器,我们还需要加上以下代码.
.wrapfix {display: inline-table;}/* Hides from IE-mac \*/* html .wrapfix {height: 1%;}.wrapfix {display: block;}/* End hide from IE-mac */

收藏分享邀请

		自动登录	找回密码
密码			注册

清除DIV浮动－使用:after

最新评论

相关分类