清除DIV浮动－使用:after

　清除DIV浮动－使用:after

作者：forestgan　时间： 2005-12-07　文档类型：原创　来自：蓝色理想

特点：不需要另外加个清除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>

[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;
  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>

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

为了适应各个浏览器,我们还需要加上以下代码.

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

出处：蓝色理想
责任编辑：yuanshi

◎进入论坛网页制作、网站综合版块参加讨论

作者文章

CSS解决未知高度垂直居中

站点最新

站点最新列表

张舰CG作品选登

虫虫水彩学习日记:一衣草莓

疯狂的程序员第四回

疯狂的程序员第三回

光照完全指南之光的方向

下一代web:浏览器存储支持

2008 LOGO设计趋势

php设计模式介绍之工厂模式

从吉普车的镜头看台湾 Ⅱ

《NewWebPick》15期中文大众版

栏目最新

栏目最新列表

火星人的耳机

公司正式宣布创业失败

用corelDEAW 12打造唇膏

二行代码解决全部网页木马

一行代码解决iframe挂马

Photoshop制作星空爆炸效果

CorelDraw 12打造休闲裤

Firework如何画特殊的切角图形

Firework打造韩式风格的手提袋

flash实例:打造佛光效果