asfman
android developer
posts - 90,  comments - 213,  trackbacks - 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的背景和边框
<!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的默认值是&quot;inline&quot;,
不能收到clear的特性,同时将清除容器的高度设为零,height:&nbsp;0;,可见度为隐藏</p></div>
  <div id="sidel"><p>left</p>
    <p>&nbsp;</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的默认值是&quot;inline&quot;,
不能收到clear的特性,同时将清除容器的高度设为零,height:&nbsp;0;,可见度为隐藏</p></div>
  <div id="sidel"><p>left</p>
    <p>&nbsp;</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
只有注册用户登录后才能发表评论。

<2006年8月>
303112345
6789101112
13141516171819
20212223242526
272829303112
3456789

常用链接

留言簿(15)

随笔分类(1)

随笔档案(90)

文章分类(727)

文章档案(712)

相册

收藏夹

http://blog.csdn.net/prodigynonsense

友情链接

最新随笔

搜索

  •  

积分与排名

  • 积分 - 466814
  • 排名 - 6

最新随笔

最新评论

阅读排行榜

评论排行榜