CSS教程：总结清除浮动的方法

作者佚名技术来源 CSS技术浏览发布时间 2012-03-05

作者：Dudo

原文连接：http://www.dudo.org/article.asp?id=239

很多人都有研究闭合浮动元素的问题，但是解决方法却不一样，也并不是每一种方法都尽善尽美。闭合浮动元素（或者叫清除浮动）是web标准设计中经常会遇到的一个问题，因此，这里我想总结一下目前经常用到的几种方法，并比较一下他们的易用性和适用环境。如果你有更好的方法不妨提出来大家一起讨论。

问题的提出：

最简单的一种情形就是我们把一个小的、固定宽度的div元素（比如导航、引用等）和其他元素内容一起包含在一个大的div中。比如下面这段代码：

<div id="outer">
<div id="inner"> <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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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:#fafaf</td> </tr> <tr> <td><p>凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：<a href="http://www.lingzhong.cn">http://www.lingzhong.cn</a> 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!</p> </td> </tr> </table> </div> <div class="page"><a href="13803.htm" class="current">1</a><a href="13803-2.htm">2</a><a href="13803-3.htm">3</a><a href="13803-4.htm">4</a><a href="13803-5.htm">5</a><a href="13803-6.htm">6</a><a href="13803-7.htm">7</a><a href="13803-8.htm">8</a><a href="13803-9.htm">9</a><a href="13803-10.htm">10</a><a href="13803-11.htm">11</a><a href="13803-2.htm">下一页</a><div style="clear:both;"></div></div> <div id="jiathis">  <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare"> <a style="background:none;">分享到：</a> <a class="bds_qzone"></a> <a class="bds_tsina"></a> <a class="bds_tqq"></a> <a class="bds_renren"></a> <a class="bds_baidu"></a> <a class="bds_douban"></a> <a class="bds_kaixin001"></a> <a class="bds_t163"></a> <a class="bds_tsohu"></a> <span class="bds_more">更多</span> <a class="shareCount"></a> </div> <script type="text/javascript" id="bdshare_js" data="type=tools&uid=460515" ></script> <script type="text/javascript" id="bdshell_js"></script> <script type="text/javascript"> document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?t=" + new Date().getHours(); </script>  <div style="clear:both;"></div> </div> <div id="likeart"> <div class="liketitle">你可能对下面的文章感兴趣</div> <div class="likebox"> <ul> <li><a href="http://www.lingzhong.cn/tech/32425.htm" title="Photoshop婚纱图片调色:青黄色调淡雅婚片" target="_blank">Photoshop婚纱图片调色:青黄色调淡雅婚片</a></li> <li><a href="http://www.lingzhong.cn/tech/28695.htm" title="Linux下如何安装SNMP服务" target="_blank">Linux下如何安装SNMP服务</a></li> <li><a href="http://www.lingzhong.cn/tech/24985.htm" title="RHCE课程-系统管理部分|5、linux的远程登陆，telnet.ssh" target="_blank">RHCE课程-系统管理部分|5、linux的远程登陆，telnet.ssh</a></li> <li><a href="http://www.lingzhong.cn/tech/36405.htm" title="Photoshop制作伤感眼泪的2种方法" target="_blank">Photoshop制作伤感眼泪的2种方法</a></li> <li><a href="http://www.lingzhong.cn/tech/12613.htm" title="Godaddy域名续费过期拿回全过程经验分享" target="_blank">Godaddy域名续费过期拿回全过程经验分享</a></li> <li><a href="http://www.lingzhong.cn/tech/10210.htm" title="域名注册机构采用.org最新安全性措施" target="_blank">域名注册机构采用.org最新安全性措施</a></li> <li><a href="http://www.lingzhong.cn/tech/48539.htm" title="主流WEB服务器比较(6)" target="_blank">主流WEB服务器比较(6)</a></li> <li><a href="http://www.lingzhong.cn/tech/26985.htm" title="快速体验Linux系统的3种方式" target="_blank">快速体验Linux系统的3种方式</a></li> <li><a href="http://www.lingzhong.cn/tech/15466.htm" title=" 推荐几款傻瓜型的ASP服务器软件 " target="_blank"> 推荐几款傻瓜型的ASP服务器软件 </a></li> <li><a href="http://www.lingzhong.cn/tech/37273.htm" title="PS教程:增强女孩的皮肤和头发照明效果" target="_blank">PS教程:增强女孩的皮肤和头发照明效果</a></li> </ul> </div> <div style="clear:both;"></div> </div> <div class="prenext"><span class="pre">上一篇: <a href='http://www.lingzhong.cn/tech/13804.htm'>HTML验证的好处？</a></span><span class="next">下一篇: <a href='http://www.lingzhong.cn/tech/13802.htm'>CSS教程：简化CSS中属性的示例</a></span> <div style="clear:both;"></div> </div>  <div class="comment"> <div class="more"> <a href="http://www.lingzhong.cn/tech/plus/comment/?id=13803">关于CSS教程：总结清除浮动的方法的所有评论</a> </div>  <div class="list"> <script language="JavaScript" type="text/javascript" src="http://www.lingzhong.cn/tech/plus/comment/js.asp?id=13803"></script> </div>  <div class="post"> <form action="http://www.lingzhong.cn/tech/plus/comment/save.asp" method="post"> <input type="hidden" name="id" value="13803"> <label for="user">昵称</label> <input name="user" type="text" class="input" /> <label for="content">评论内容</label> <textarea name="content" cols="70" rows="6" class="textarea" onfocus="if($('sn').innerHTML.length==0){geturl('http://www.lingzhong.cn/tech/plus/comment/getcode.asp?'+Math.random(),'sn');}">

随机推荐

地址(ADD)：厦门软件园二期望海路63号701E（东南融通旁）邮编(ZIP)：361008

电话：0592-5908028 传真：0592-5908039 咨询信箱：web@lingzhong.cn 咨询OICQ：173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024 ICP备案:闽ICP备05037997号