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

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