今天小编跟大家讲解下有关CSS教程：总结清除浮动的方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS教程：总结清除浮动的方法 的相关资料，希望小伙伴们看了有所帮助。
作者：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""<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"><html xmlns="<a href="http://www.w3.org/1999/xhtml">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[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 id="outer"><div id="inner"><h1>A Column</h1><kbd>#inner {<br/>float:left;<br/>width:26%;<br/>}</kbd><p>点击下面的链接以改变该列的高度</p><ul id="lccont"><li><a href="'lccont',1)">缩短</a></li><li> <a href="'lccont',5)">加长</a></li><li> <a href="'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="'mccont',1)">缩短</a> <a href="'mccont',10)">加长</a> 或者 <a href="'mccont',40)">更长</a>。</p><p id="mccont">闭合浮动元素（或者叫清除浮动）是web标准设计中经常会遇到的一个问题 因此 这里我想总结一下目前经常用到的几种方法 并比较一下他们的易用性和适用环境。如果你有更好的方法不妨提出来大家一起讨论。 </p></div><div id="footer">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闭合浮动元素
复制代码代码如下:<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"><html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"><head><title> 清除浮动（闭合浮动元素）例二：使用空div清除浮动 </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;}div.clear{clear:left;}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[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 id="outer"><div id="inner"><h1>#inner</h1><kbd>#inner {<br/>float:left;<br/>width:26%;<br/>}</kbd><p>点击下面的链接以改变该列的高度</p><ul id="lccont"><li><a href="'lccont',1)">缩短</a></li><li> <a href="'lccont',5)">加长</a></li><li> <a href="'lccont',10)">再长点</a></li><li>－－－－－－－</li></ul></div><h1>#outer</h1><p><kbd>#outer {background-color:#999;width:100%; }div.clear{clear:left;}</kbd></p><p>点击改变长度 <a href="'mccont',1)">缩短</a> <a href="'mccont',10)">加长</a> 或者 <a href="'mccont',40)">更长</a>。</p><p id="mccont">闭合浮动元素（或者叫清除浮动）是web标准设计中经常会遇到的一个问题 因此 这里我想总结一下目前经常用到的几种方法 并比较一下他们的易用性和适用环境。如果你有更好的方法不妨提出来大家一起讨论。 </p><div class="clear"></div></div><div id="footer">From:</div></body></html>
[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代码 CSS 规则 上面的代码中有两行注释 其中第一行结束时出现了反斜杠（\） 在Mac的Internet Explorer中会认为注释并没有结束 于是继续向下直到第一个完事的“*/”出现 这中间的所有字符都被当作是注释 而IE/Win却也只会把第一行和第三行看作是注释 中间的为有效代码。所以这样就区分出来了不同平台上的IE了。 正是基于以上原理 在windows的IE 6上的清理浮动 可以使用如下代码：
复制代码代码如下:#outer { display:inline-block; } * html #outer { height:1%; } #outer { display:block; }
例三：使用:after伪类清理浮动
复制代码代码如下:<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"><html xmlns="<a href="http://www.w3.org/1999/xhtml">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;}* html #outer {height:1%;}#outer {display:block;}#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[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 id="outer"><div id="inner"><h1>#inner</h1><kbd>#inner {<br/>float:left;<br/>width:26%;<br/>}</kbd><p>点击下面的链接以改变该列的高度</p><ul id="lccont"><li><a href="'lccont',1)">缩短</a></li><li> <a href="'lccont',5)">加长</a></li><li> <a href="'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/><br/>* html #outer {height:1%;}<br/>#outer {display:block;}</kbd></p><p>点击改变长度 <a href="'mccont',1)">缩短</a> <a href="'mccont',10)">加长</a> 或者 <a href="'mccont',40)">更长</a>。</p><p id="mccont">闭合浮动元素（或者叫清除浮动）是web标准设计中经常会遇到的一个问题 因此 这里我想总结一下目前经常用到的几种方法 并比较一下他们的易用性和适用环境。如果你有更好的方法不妨提出来大家一起讨论。 </p></div><div id="footer">From: </div></body></html>
[Ctrl A 全部选择 提示：你可先修改部分代码 再按运行] P.S. 如果你不考虑 IE6/Mac用户的话你只需要写* html #outer {height:1%;}即可。 另外 似乎在Internet Explorer 7中不高display:inline-block也不好使。因此要使用最完整的Hack招数。 如果你对如何使用CSS 2中的伪类不熟悉的话 推荐你先阅读一下“细说CSS样式选择符——CSS 2.1 Selectors（1）、（2）、（3）” 3）浮动外部元素 float-in-float 这种方法很简单 就是把“#outer”元素也进行浮动（向左或者向右）。 例子 但是这种方法带来的别外一个问题就是和“#outer”相邻的下一个元素会受到“#outer”的影响位置会产生变化 所以使用这种方法一定要小心。有选择把页面中的所有元素都浮动起来 最后使用一个适当的有意义的元素（比如页脚）进行清理浮动 这有助于减少不必要的标记 但是过多的浮动会增加布局的难度。 例四：float-in-float
复制代码代码如下:<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"><html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"><head><title> 清除浮动（闭合浮动元素）例四：float-in-float </title><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><style type="text/css">#outer {float:left;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[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 id="outer"><div id="inner"><h1>#inner</h1><kbd>#inner {<br/>float:left;<br/>width:26%;<br/>}</kbd><p>点击下面的链接以改变该列的高度</p><ul id="lccont"><li><a href="'lccont',1)">缩短</a></li><li> <a href="'lccont',5)">加长</a></li><li> <a href="'lccont',10)">再长点</a></li><li>－－－－－－－</li></ul></div><h1>#outer</h1><p><kbd> #outer {<br/>float:left;<br/>background-color:#999;}</kbd></p><p>点击改变长度 <a href="'mccont',1)">缩短</a> <a href="'mccont',10)">加长</a> 或者 <a href="'mccont',40)">更长</a>。</p><p id="mccont">闭合浮动元素（或者叫清除浮动）是web标准设计中经常会遇到的一个问题 因此 这里我想总结一下目前经常用到的几种方法 并比较一下他们的易用性和适用环境。如果你有更好的方法不妨提出来大家一起讨论。 </p></div><div id="footer">From: </div></body></html>
[Ctrl A 全部选择 提示：你可先修改部分代码 再按运行] 4）设置overflow为hidden或者auto 把“#outer”的属性overflow值设置为hidden或者auto同样可以清理浮动 这种方法不需要添加额外的标记。但是使用overflow的时候一定要小心 因为它会浏览器的表现。另外 在Internet Explorer 6中单纯地设置overflow为hidden或者auto并不能有效清除浮动（闭合浮动元素） 还要指定“#outer”的一个维度 即要么给它指定一个宽度 要么指定一个高度：
复制代码代码如下:#outer {overflow:auto;width:100%;}
注意：如果你要在IE5/Mac上使用这种方法清除浮动（闭合浮动元素）的话 你就必须设定overflow的属性为值为hidden。
例五：overflow:hidden
复制代码代码如下:<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"><html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"><head><title> 清除浮动（闭合浮动元素）例五：overflow:hidden或overflow:auto </title><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><style type="text/css">#outer {width:100%;overflow:hidden;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[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 id="outer"><div id="inner"><h1>#inner</h1><kbd>#inner {<br/>float:left;<br/>width:26%;<br/>}</kbd><p>点击下面的链接以改变该列的高度</p><ul id="lccont"><li><a href="'lccont',1)">缩短</a></li><li> <a href="'lccont',5)">加长</a></li><li> <a href="'lccont',10)">再长点</a></li><li>－－－－－－－</li></ul></div><h1>#outer</h1><p><kbd> #outer {<br/>overflow:hidden;<br/>width:100%;<br/>background-color:#999;}</kbd></p><p>点击改变长度 <a href="'mccont',1)">缩短</a> <a href="'mccont',10)">加长</a> 或者 <a href="'mccont',40)">更长</a>。</p><p id="mccont">闭合浮动元素（或者叫清除浮动）是web标准设计中经常会遇到的一个问题 因此 这里我想总结一下目前经常用到的几种方法 并比较一下他们的易用性和适用环境。如果你有更好的方法不妨提出来大家一起讨论。 </p></div><div id="footer">From:</div></body></html>
[Ctrl A 全部选择 提示：你可先修改部分代码 再按运行] 比较与选择 四种方法中使用哪种最好呢 首先 不推荐使用after伪类 对比其它三种方法 holly招数有点太烦琐 不好掌握 我上面讲到的holly招数中并不仅仅是IE/Win上有问题 当出现:hover时还会有其它问题 所以我们又加上了inline-block等属性 也就是说这种方法存在更多的不确定性。推荐对代码有“洁癖”并且技术较高的人使用。那么其它三种方法其实都可以考虑。 不过使用overflow的时候 可能会对页面表现带来影响 而且这种影响是不确定的 你最好是能在多个浏览器上测试你的页面； 而对于使用额外标签清除浮动（闭合浮动元素） 是W3C推荐的做法。至于使用<br />元素还是空<div></div>可以根据自己的喜好来选（当然你也可以使用其它块级元素）。不过要注意的是 <br />本身是有表现的 它会多出一个换行出来 所以要设定它的heigh为0 以隐藏它的表现。所以大多数情况下使用空<div>比较合适。 float-in-float 也是一个很好的选择 把你要进行清理浮动的元素外层再加上一层<div>并设置属性fload:left即可 不过要注意相邻元素的变化。
来源：爱蒂网
