|
副标题[/!--empirenews.page--]
作者：Dudo
原文连接：?id=239
很多人都有研究闭合浮动元素的问题，但是解决方法却不一样，也并不是每一种方法都尽善尽美。闭合浮动元素（或者叫清除浮动）是web标准设计中经常会遇到的一个问题，因此，这里我想总结一下目前经常用到的几种方法，并比较一下他们的易用性和适用环境。如果你有更好的方法不妨提出来大家一起讨论。 问题的提出：
最简单的一种情形就是我们把一个小的、固定宽度的div元素（比如导航、引用等）和其他元素内容一起包含在一个大的div中。比如下面这段代码：
复制代码 代码如下:
<div>
<div> <h2>A Column</h2> </div>
<h1>Main Content</h1>
<p>Lorem ipsum</p>
</div>
我们可以为“#inner”设定一个宽度值（比如说20%），但是由于div是块级元素，即使我们设定了宽度，其后面的内容也只能在下一行中显示，除非我们给它设定一个浮动属性（无论是向左浮动或者向右浮动）。那么此时会产生我们上面提到的问题了。
如果“#inner”的宽度和高度都比“#outer”小，这不会有问题。
但是，如果“#inner”的高度超过了“#outer”，那么的底部就会超出“#outer”的底部。这是因为我们为“#inner”设定了float属性后，它就会脱离的文本流，无论其宽度和高度怎么变化都不会使“#outer”跟随变化。
例一：未清除浮动时的布局表现
复制代码 代码如下:
<!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> 清除浮动（闭合浮动元素）例一：问题的提出 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#outer {
background-color:#999;
border:3px solid #666;
}
#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>A Column</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>Main Content</h1>
<p><kbd>#outer
{
background-color:#fff;
width:100%;
}</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>
[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
在这个例子中，最开始由于“#inner”的高度小于“#outer”所以不会有问题，但是当你点击“加长”后你会发现“#inner”的底边已经超出了“#outer”的范围，而“#outer”没有发生改变。这就是我们所提到的“清除浮动（闭合浮动元素）”或者是“闭合浮动”问题 解决办法：
1）额外标签法
第一个，也是W3C推荐的方法就是使用额外标签的办法。这种方法就是在内容的末尾增加一个空的标签，典型的做法就是使用类似
<br style="clear:both;" />
或者使用
<div style="clear:both;"></div>
这种办法通过增加一个HTML元素迫使外部容器撑开。不过这个办法会增加额外的标签使HTML结构看起来不够简洁。
例二：使用空div闭合浮动元素
复制代码 代码如下: （编辑：晋中站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
