|
[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
P.S. 我发现在Internet Explorer中（无论是6还是7）<br style="clear:both" />可以清除浮动，但是不能闭合浮动元素，在Firefox中就没有这个问题，不知道是什么原因？！
2）使用after伪类
使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除浮动（闭合浮动元素），并隐藏这个内容：
复制代码 代码如下:
#outer:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
但奇怪的是Windows中的Internet Explorer 6及以下版本并不支持CSS 2.1中的after伪类而Mac中的Internet Explorer却可以正常使用，所以我们还要单独针对Win/IE进行处理。在区分Win和Mac中Internet Explorer的诸多方法中，最常用就是Holly招数。Holly招数的原理是这样的，CSS代码
/* 这段代码只有IE/Win可以看见 */
CSS 规则
/* 结束Hack */
上面的代码中有两行注释，其中第一行结束时出现了反斜杠（），在Mac的Internet Explorer中会认为注释并没有结束，于是继续向下直到第一个完事的“*/”出现，这中间的所有字符都被当作是注释，而IE/Win却也只会把第一行和第三行看作是注释，中间的为有效代码。所以这样就区分出来了不同平台上的IE了。
正是基于以上原理，在windows的IE 6上的清理浮动，可以使用如下代码：
复制代码 代码如下:
#outer {
display:inline-block;
}
/* Holly Hack Begine */
* html #outer {
height:1%;
}
#outer {
display:block;
}
/* End Hack */
例三：使用:after伪类清理浮动
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml"></a>">
<head>
<title> 清除浮动（闭合浮动元素）例三：使用:after伪类 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#outer {
background-color:#999;
border:3px solid #666;
}
#outer:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:left;
}
#outer {
display:inline-block;
}
/* Holly Hack Begine */
* html #outer {
height:1%;
}
#outer {
display:block;
}
/* End Hack */
#inner {
background-color:#ccc;
float:left;
width:26%;
}
#inner *, #outer p {
margin: 5px 5px 5px 10px;
}
kbd {
display:block;
background:#fafaff;
border:1px solid #b0c0d0;
text-indent:0px;
}
kbd:first-line {
color:#c3c;
font-weight:bold;
text-indent:20px
}
#footer {
clear:both;
border:3px solid #333;
background-color:#999;
margin-top:15px;
height:60px;
line-height:60px
}
ul,li,h1 { margin:0;padding:0}
</style>
<script type="text/javascript">
// <![CDATA[
/* Pixy's filler generator - <a href="http://www.pixy.cz/blogg/clanky/css-3col-layout/"></a> */
function toggleContent(name,n) {
var i,t='',el = document.getElementById(name);
if (!el.origCont) el.origCont = el.innerHTML;
for (i=0;i<n;i ) t = el.origCont;
el.innerHTML = t;
}
// ]]>
</script>
</head>
<body>
<div>
<div>
<h1>#inner</h1>
<kbd>#inner {<br/>
float:left;<br/>
width:26%;<br/>
}</kbd>
<p>点击下面的链接以改变该列的高度</p>
<ul>
<li><a href="javascript:toggleContent('lccont',1)">缩短</a></li>
<li> <a href="javascript:toggleContent('lccont',5)">加长</a>
</li><li> <a href="javascript:toggleContent('lccont',10)">再长点</a></li>
<li>－－－－－－－</li>
</ul>
</div>
<h1>#outer</h1>
<p><kbd> #outer:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:left;
}<br/>
#outer {
display:inline-block;
}<br/>
/* Holly Hack Begine */<br/>
* html #outer {
height:1%;
}<br/>
#outer {
display:block;
}
/* End Hack */
</kbd>
</p>
<p>
点击改变长度 <a href="javascript:toggleContent('mccont',1)">缩短</a>，<a href="javascript:toggleContent('mccont',10)">加长</a> 或者 <a href="javascript:toggleContent('mccont',40)">更长</a>。</p>
<p>闭合浮动元素（或者叫清除浮动）是web标准设计中经常会遇到的一个问题，因此，这里我想总结一下目前经常用到的几种方法，并比较一下他们的易用性和适用环境。如果你有更好的方法不妨提出来大家一起讨论。 </p>
</div>
<div>
From: </div>
</body>
</html>
（编辑：南平站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
