清除DIV浮动－使用:after

E-file：Cary

Cary的最新文章：

首页--文章内容

清除DIV浮动－使用:after

www.fh888.com 2006-1-11 22:27:19

媒体：蓝色理想作者：forestgan
发布：Cary

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

</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的背景和边框．

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

</body>
</html>

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

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

【声明】网页天堂刊载此文不代表同意其说法或描述，仅为提供更多信息，也不构成任何投资建议。转载请注明出处。

我也说两句

E-File帐号：用户名：密码： [注册]

评论：（内容不能超过500字，如果您不填写用户名和密码只能以游客的身份发表评论。）

*评论内容将在30分钟以后显示！

发表须知：
一、用户须严格遵守国家法律和政策，包括但不限于《全国人大常委会关于维护互联网安全的决定》、《信息网络传播权保护条例》等规定，审慎、合法地利用伊妃（E-file）平台发表言论、作品。
二、用户的言论、行为若涉嫌违法或侵权，用户可能被强制承担因该行为直接或间接导致的全部法律责任。依照法律法规规定，伊妃（E-file）运营方有义务提供用户资料，有义务和权利采取删除、屏蔽、断开链接等各种必要措施。
三、伊妃（E-file）中心授权网络法律专业研究服务机构“网络法苑”为用户及客户提供包括免费咨询在内的全方位的法律支持。