特点:不需要另外加个清除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;
w\idth: 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 class="wrap">
<div id="sider">
<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 id="sidel"><p>left</p>
<p> </p>
</div>
</div>
</body>
</html>
这是清除过浮动的.非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;
w\idth: 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 class="wrap wrapfix">
<div id="sider">
<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 id="sidel"><p>left</p>
<p> </p>
</div>
</div>
</body>
</html>
请问forestgan大哥,
display的默认值苏小雨的手册里这样写的:
block : CSS1 块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行
inline : CSS1 内联对象的默认值。将对象强制作为内联对象呈递,从对象中删除行
我怎么区分什么情况下是块对象,什么情况下是内联对象呢?
div p h1 ......肯定是块元素.
内联对象:span
<br />也是吧?
嗯,我上次忘记是在哪里回的贴了。
想知道什么是块级元素,最简单的方式就是随便下载一个dtd,去查看里面的代码,那里面的定义算满清晰的了。而且权威
posted on 2006-03-23 15:57
汪杰 阅读(252)
评论(0) 编辑 收藏 引用 所属分类:
div css dhtml