CSS实例教程:总结消除波动的方式

2021-01-20 17:30 jianzhan

作者:Dudo
原文联接:http://www.dudo.org/article.asp?id=239
许多人都有科学研究闭合波动元素的难题,可是处理方式却不1样,也其实不是每种方式都至善至美。闭合波动元素(或叫消除波动)是web规范设计方案中常常会遇到的1个难题,因而,这里我想总结1下现阶段常常用到的几种方式,并较为1下她们的易用性和可用自然环境。假如你有更好的方式何不提出来大伙儿1起探讨。 难题的提出:
最简易的1种情况便是大家把1个小的、固定不动宽度的div元素(例如导航栏、引入等)和别的元素內容1起包括在1个大的div中。例如下面这段编码:


拷贝编码
编码以下:

<div id="outer">
<div id="inner"> <h2>A Column</h2> </div>
<h1>Main Content</h1>
<p>Lorem ipsum</p>
</div>

大家能够为“#inner”设置1个宽度值(例如说20%),可是因为div是块级元素,即便大家设置了宽度,其后边的內容也只能在下1行中显示信息,除非大家给它设置1个波动特性(不管是向左波动或向右波动)。那末此时会造成大家上面提到的难题了。
假如“#inner”的宽度和高宽比都比“#outer”小,这不容易有难题。
可是,假如“#inner”的高宽比超出了“#outer”,那末的底部就会超过“#outer”的底部。这是由于大家为“#inner”设置了float特性后,它就会摆脱的文字流,不管其宽度和高宽比如何转变都不容易使“#outer”追随转变。
例1:未消除波动时的合理布局主要表现


拷贝编码
编码以下:

<!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> 消除波动(闭合波动元素)例1:难题的提出 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<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⑶col-layout/">http://www.pixy.cz/blogg/clanky/css⑶col-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规范设计方案中常常会遇到的1个难题,因而,这里我想总结1下现阶段常常用到的几种方式,并较为1下她们的易用性和可用自然环境。假如你有更好的方式何不提出来大伙儿1起探讨。 </p>
</div>
<div id="footer">
From: </div>
</body>
</html>

 [Ctrl A 所有挑选 提醒:你可先改动一部分编码,再按运作]
在这个事例中,最初因为“#inner”的高宽比小于“#outer”因此不容易有难题,可是当你点一下“加长”后你会发现“#inner”的底边早已超过了“#outer”的范畴,而“#outer”沒有产生更改。这便是大家所提到的“消除波动(闭合波动元素)”或是“闭合波动”难题 处理方法:
1)附加标识法
第1个,也是W3C强烈推荐的方式便是应用附加标识的方法。这类方式便是在內容的结尾提升1个空的标识,典型的做法便是应用相近
<br style="clear:both;" />
或应用
<div style="clear:both;"></div>
这类方法根据提升1个HTML元素驱使外界器皿撑开。但是这个方法会提升附加的标识使HTML构造看起来不足简约。
例2:应用空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> 消除波动(闭合波动元素)例2:应用空div消除波动 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<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⑶col-layout/">http://www.pixy.cz/blogg/clanky/css⑶col-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规范设计方案中常常会遇到的1个难题,因而,这里我想总结1下现阶段常常用到的几种方式,并较为1下她们的易用性和可用自然环境。假如你有更好的方式何不提出来大伙儿1起探讨。 </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伪类和內容申明在特定的如今內容结尾加上新的內容。常常的做法便是加上1个“点”,由于它较为小不太让人留意。随后大家再运用它来消除波动(闭合波动元素),并掩藏这个內容:


拷贝编码
编码以下:

#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 */
上面的编码中有两行注解,在其中第1行完毕时出現了反斜杠(\),在Mac的Internet Explorer中会觉得注解并沒有完毕,因而再次向下直至第1个完事的“*/”出現,这正中间的全部标识符都被作为是注解,而IE/Win却也只会把第1行和第3行看做是注解,正中间的为合理编码。因此这样就区别出来了不一样服务平台上的IE了。
更是根据以上基本原理,在windows的IE 6上的清除波动,可使用以下编码:


拷贝编码
编码以下:

#outer {
display:inline-block;
}
/* Holly Hack Begine \*/
* html #outer {
height:1%;
}
#outer {
display:block;
}
/* End Hack */

例3:应用: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> 消除波动(闭合波动元素)例3:应用:after伪类 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<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⑶col-layout/">http://www.pixy.cz/blogg/clanky/css⑶col-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规范设计方案中常常会遇到的1个难题,因而,这里我想总结1下现阶段常常用到的几种方式,并较为1下她们的易用性和可用自然环境。假如你有更好的方式何不提出来大伙儿1起探讨。 </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中的伪类不熟习的话,强烈推荐你先阅读文章1下“细说CSS款式挑选符——CSS 2.1 Selectors(1)、(2)、(3)”
3)波动外界元素,float-in-float
这类方式很简易,便是把“#outer”元素也开展波动(向左或向右)。
事例
可是这类方式带来的别外1个难题便是和“#outer”邻近的下1个元素会遭受“#outer”的危害部位会造成转变,因此应用这类方式1定要当心。有挑选把网页页面中的全部元素都波动起来,最终应用1个适度的成心义的元素(例如页脚)开展清除波动,这有助于降低无须要的标识,可是过量的波动会提升合理布局的难度。
例4: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> 消除波动(闭合波动元素)例4:float-in-float </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<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⑶col-layout/">http://www.pixy.cz/blogg/clanky/css⑶col-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规范设计方案中常常会遇到的1个难题,因而,这里我想总结1下现阶段常常用到的几种方式,并较为1下她们的易用性和可用自然环境。假如你有更好的方式何不提出来大伙儿1起探讨。 </p>
</div>
<div id="footer">
From: </div>
</body>
</html>

 [Ctrl A 所有挑选 提醒:你可先改动一部分编码,再按运作]
4)设定overflow为hidden或auto
把“#outer”的特性overflow值设定为hidden或auto一样能够清除波动
这类方式不必须加上附加的标识。可是应用overflow的情况下1定要当心,由于它会访问器的主要表现。此外,在Internet Explorer 6中单纯性地设定overflow为hidden或auto其实不能合理消除波动(闭合波动元素),还要特定“#outer”的1个维度,即要末给它特定1个宽度,要末特定1个高宽比:


拷贝编码
编码以下:

#outer {
overflow:auto;
width:100%;
}

留意:假如你要在IE5/Mac上应用这类方式消除波动(闭合波动元素)的话,你就务必设置overflow的特性为值为hidden。

例5: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> 消除波动(闭合波动元素)例5:overflow:hidden或overflow:auto </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<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⑶col-layout/">http://www.pixy.cz/blogg/clanky/css⑶col-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规范设计方案中常常会遇到的1个难题,因而,这里我想总结1下现阶段常常用到的几种方式,并较为1下她们的易用性和可用自然环境。假如你有更好的方式何不提出来大伙儿1起探讨。 </p>
</div>
<div id="footer">
From:</div>
</body>
</html>

 [Ctrl A 所有挑选 提醒:你可先改动一部分编码,再按运作] 较为与挑选
4种方式中应用哪样最好是呢?最先,不强烈推荐应用after伪类,比照其它3种方式,holly伎俩有点太烦琐,不太好把握,我上面讲到的holly伎俩中其实不仅仅是IE/Win上有难题,当出現:hover时还会有其它难题,因此大家又再加了inline-block等特性,也便是说这类方式存在更多的不确定性性。强烈推荐对编码有“洁癖”而且技术性较高的人应用。
那末其它3种方式实际上都可以以考虑到。
但是应用overflow的情况下,将会会对网页页面主要表现带来危害,并且这类危害是不确定性的,你最好是是能在好几个访问器上检测你的网页页面;
而针对应用附加标识消除波动(闭合波动元素),是W3C强烈推荐的做法。至于应用<br />元素還是空<div></div>能够依据自身的爱好来选(自然你还可以应用其它块级元素)。但是要留意的是,<br />自身是有主要表现的,它会多出1个换行出来,因此要设置它的heigh为0,以掩藏它的主要表现。因此大多数数状况下应用空<div>较为适合。
float-in-float,也是1个很好的挑选,把你要开展清除波动的元素外层再再加1层<div>并设定特性fload:left便可,但是要留意邻近元素的转变。