您当前的位置：首页 > 迪奥学院 > css

清除DIV浮动－使用:after

时间：10-25  来源：  作者：  分享到QQ空间

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

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>清除浮动--使用:after--Clearing</title>
<style type="text/css">
<!--
*{
padding: 0;
margin: 0;
}

body{
font: 85%/140% Arial, Helvetica, sans-serif;
padding: 10px 0;
text-align: center;
}

.wrap {
border: 1px solid #999999;
margin: 0 auto;
width: 762px;
width: 760px;
background: #ECECEC;
text-align: left;
}

.wrapfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#sidel{
float: left;
width: 160px;
}

#sider{
float: right;
width: 600px;
background: #F9F9F9;
}

p,pre,em{
padding: 10px;
}
-->
</style>
</head>

<body>
<div >
<div >
<p>清除浮动--使用:after </p>
<em>这是没有清除过浮动的．非Ie
浏览器看不到wrap的背景和边框．</em>
<p> 特点：不需要另外加个清除DIV.</p>
<p>:after（伪对象）--设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie
浏览器支持，所以并不影响到IE/WIN浏览器。</p>
<p>CSS</p>
<pre>
#wrap:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

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

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

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>清除浮动--使用:after--Clearing</title>
<style type="text/css">
<!--
*{
padding: 0;
margin: 0;
}

body{
font: 85%/140% Arial, Helvetica, sans-serif;
padding: 10px 0;
text-align: center;
}

.wrap {
border: 1px solid #999999;
margin: 0 auto;
width: 762px;
width: 760px;
background: #ECECEC;
text-align: left;
}

.wrapfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#sidel{
float: left;
width: 160px;
}

#sider{
float: right;
width: 600px;
background: #F9F9F9;
}

p,pre{
padding: 10px;
}
-->
</style>
</head>

<body>
<div wrapfix">
<div >
<p>清除浮动--使用:after </p>
<p> 特点：不需要另外加个清除DIV.</p>
<p><em>这是清除过浮动的．非Ie


浏览器看到wrap的背景和边框．</em></p>
<p>:after（伪对象）--设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie
浏览器支持，所以并不影响到IE/WIN浏览器。</p>
<p>CSS</p>
<pre>
#wrap:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

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

</body>
</html>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
为了适应各个浏览器,我们还需要加上以下代码.

.wrapfix {display: inline-table;}/* Hides from IE-mac */* html .wrapfix {height: 1%;}.wrapfix {display: block;}/* End hide from IE-mac */

上一篇：CSS选择符 下一篇：CSS中expression使用简介
共有条评论发表评论

用户名密码

验证码 匿名发表

最新更新
Google AD
栏目推荐
    热门点评