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

当前位置 : 首页 > 网页制作 > CSS > CSS教程:总结清除浮动的方法

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

来源: 作者: 时间:2015-12-16 18:25
很多人都有研究闭合浮动元素的问题,但是解决方法却不一样,也并不是每一种方法都尽善尽美。闭合浮动元素(或者叫清除浮动)是web标准设计中经常会遇到的一个问题,因此,这里
很多人都有研究闭合浮动元素的问题,但是解决方法却不一样,也并不是每一种方法都尽善尽美。闭合浮动元素(或者叫清除浮动)是web标准设计中经常会遇到的一个问题,因此,这里我想总结一下目前经常用到

作者:Dudo
原文连接:
很多人都有研究闭合浮动元素的问题,但是解决方法却不一样,也并不是每一种方法都尽善尽美。闭合浮动元素(或者叫清除浮动)是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[
/* Pixy's filler generator - <a href="http://www.pixy.cz/blogg/clanky/css-3col-layout/">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 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="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 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[
/* Pixy's filler generator - <a href="http://www.pixy.cz/blogg/clanky/css-3col-layout/">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 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="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
{
background-color:#999;
width:100%;
}
div.clear{
clear:left;
}</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 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代码
/* 这段代码只有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">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;
}
/* 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/">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 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="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 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[
/* Pixy's filler generator - <a href="http://www.pixy.cz/blogg/clanky/css-3col-layout/">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 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="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 {<br/>
float:left;<br/>
background-color:#999;
}
</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 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[
/* Pixy's filler generator - <a href="http://www.pixy.cz/blogg/clanky/css-3col-layout/">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 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="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 {<br/>
overflow:hidden;<br/>
width:100%;<br/>
background-color:#999;
}
</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 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即可,不过要注意相邻元素的变化。

Tag:
网友评论

<