快速业务通道

CSS:闭合元素和浮动元素的差别

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

提示:本文不是教程,而是对闭合浮动元素的方法在某个特定情况下的现象的讨论,涉及float、clear、overflow、:after等知识,新手勿入。


float属性在页面排版上非常有用,但是也带来很多问题。最常见的就是浮动元素的闭合问题。
如果一个没有设定高度的不浮动元素的子元素浮动,则该元素的高度不会包括浮动子元素的高度,而只会包含其内部不浮动元素的高度,因为浮动元素不属于常规流向,它脱离了文档流。因此如果要元素能够自动包含浮动子元素,则需要闭合浮动元素。
目前比较常用的有3种方法:

  • 利用浮动子元素后的元素清除浮动(包括添加1个空的元素以清除浮动)。
  • 使用:after伪元素,在元素最后插入清除。
  • 为元素设定overflow属性除“visible”之外的值。


还有1个方法可以使元素自适应高度:

  • 浮动元素,浮动的元素会包含浮动的后代元素。

下列代码,其显示如图1所示。

提示:所列代码只是关键代码,完整代码请查看示例页面。


CSS:

CSS:闭合元素和浮动元素的差别p,
div 
{
CSS:闭合元素和浮动元素的差别margin
: 5px;
CSS:闭合元素和浮动元素的差别
}

.wrap 
{
CSS:闭合元素和浮动元素的差别width
: 440px;
CSS:闭合元素和浮动元素的差别margin
: 10px;
CSS:闭合元素和浮动元素的差别clear
: both;
CSS:闭合元素和浮动元素的差别
}

CSS:闭合元素和浮动元素的差别.div1,
.div2p 
{
CSS:闭合元素和浮动元素的差别float
: left;
CSS:闭合元素和浮动元素的差别width
: 80px;
CSS:闭合元素和浮动元素的差别margin
: 8px;
CSS:闭合元素和浮动元素的差别+display
: inline;
CSS:闭合元素和浮动元素的差别
}

CSS:闭合元素和浮动元素的差别

XHTML:
CSS:闭合元素和浮动元素的差别<div class="wrap">
CSS:闭合元素和浮动元素的差别  
<div class="div1">div1,浮动</div>
CSS:闭合元素和浮动元素的差别  
<div class="div2">
CSS:闭合元素和浮动元素的差别    
<class="div2p">div2内p1</p>
CSS:闭合元素和浮动元素的差别   
<class="div2p">div2内p2</p>
CSS:闭合元素和浮动元素的差别    
<class="div2p3">div2内p3,不浮动</p>
CSS:闭合元素和浮动元素的差别  
</div>
CSS:闭合元素和浮动元素的差别  
<div class="div3">div3,不浮动</div>
CSS:闭合元素和浮动元素的差别
</div>
提示:截图是Firefox 2.0(以下简称FF)中的效果,如无特殊声明,则表示在Windows IE7.0(以下简称IE)、Opera 9.2(以下简称Op)、Safari 3.0(以下简称Sa)中效果相同。

图1:浮动元素与子元素浮动的元素
/web/css/format/clearFloat/clearFloat_01.gif
如果对.div2p增加CSS:
.div2p {
CSS:闭合元素和浮动元素的差别......
CSS:闭合元素和浮动元素的差别clear
:left;
CSS:闭合元素和浮动元素的差别
}

由于“clear:left”含义为:不允许本元素左边有浮动框,而div1也是浮动元素,因此,p1和p2下移到了div1的下面,如图2所示。

图2:不浮动的元素内的浮动子元素设定&ldq

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

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

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

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