下载首页 | 资讯中心 | 下载分类 | 最近更新 | 排 行 榜 | 国产软件 | 国外软件 | 汉化补丁 |
文章搜索: 分类 关键字 收藏本站设为首页
您的位置:首页网页设计网页特效 → 总结网页制作中闭合浮动元素的几个方法
总结网页制作中闭合浮动元素的几个方法
日期:2007-5-20 2:09:05 人气:47     [ ]
上一页 [1] [2] 下一页

在页面制作过程当中,我们曾经遇到过这样的问题,当浮动元素高度增加,而超出其父容器时,父容器不会随着它的高度增加而变长。比如

以下为引用的内容:

<div id="main">
  <div id="box1">box1</div>
  <div id="box2">box2</div>
  <div class="clean"></div>
</div>

当我们需要这样的效果,闭和浮动元素,通常是增加一个一个div,赋予它一个class让它清除两端,就是clear:both。下面是css

以下为引用的内容:
#main{background-color: #4F6B72;padding: 5px;}
#box1{float:left;width:200px;background-color: #F5FAFA;}
#box2{float:left;width:300px;background-color: #CAE8EA;}
.clean{clear:both;font-size: 0;line-height: 0;height: 0;}

这种方法兼容性好,但是多了一段没有语义的代码。所以,我们还有一些其他的方法。

在标准化的范围里,当元素被赋予以下几种属性,就可以闭合浮动元素。

1. float浮动元素,left 或者 right 都可以。

2. position:relative 绝对定位的元素。

3. display:inline-block(inline-block对象显示为内嵌元素,但所有子对象都显示为块元素,相邻的内嵌元素将显示在同一行,允许空格。这个方法以gecko为核心的浏览器比如firefox目前不支持)。

4. display:table-cell 类型元素,其实 table, table-head-group, table-row 什么的也都可以,还有inline-table(以gecko为核心的浏览器比如firefox目前不支持)也同样,因为他们都会间接产生一个匿名的table-cell。

5. overflow取值非visible的元素。这个方法用的比较多。

以上除了overflow,其余都有一个附加效果就是自动收缩父容器宽度。

对于IE/Win,我们需要做的就是触发元素的layout属性,具有layout属性的元素会自动闭合浮动元素。可以触发layout属性的方法:

1. float浮动元素,left 或者 right 都可以。

2. position:relative 绝对定位的元素。

3. display:inline-block

4. zoom

5. 定义元素的width/height

6. overflow/overflow-x/overflow-y [IE7 新增]

7. max/min-width/height [IE7 新增]

IE的这些方法有很多局限,比如zoom就是非标准属性,无法通过验证,而其他的定义会带给元素一些其他的效果。

还要提一点的是display:inline-block,这个属性对IE而言本身没什么用,实际效果只是给一个元素暗地添加了layout,但是标准兼容浏览器是认得这个属性的,所以要不影响这些浏览器,需要将display设回默认。这里IE有一个bug,如果先定义了display:inline-block,然后再将display设回block(这两个display要先后放在两个CSS声明中才有效果),那么layout不会消失,同时也不会影响其他浏览器,所以目前来说,这也算一个不错的触发layout的方法:

出处:本站原创 作者:佚名
 阅读排行
01.精美qq空间横幅代码
02.最酷qq个性女生网名
03.最新又有免费QQ秀啦《..
04.巧用透明FlaSh扮靓你的..
05.花之神匠代码(最新代码..
06.最新QQ空间免费导航
07.最新免费个人形象设置..
08.最新qq空间flash代码m..
09.CSS技术结合图像实现动..
10.Photoshop光影魔术师:..
11.QQ音速种子狂刷
12.最新QQ空间透明代码
13.PS实例教程:教你制作结..
14.Photoshop光影魔术师:..
15.制作背景图__教程
16.用Photoshop制作漂亮的..
17.如何获得QQ音速种子
18.≤QQ空间代码≥在日志..
19.网页浮动广告的制作代..
20.用Photoshop制作大红灯..
21.常用CSS
22.Photoshop给靓丽美女打..
 推荐文章
·Photoshop 表现技法之..
·快速将你的相片矢量化..
·PHOTOSHOP制作炽热的太..
·用Photoshop制作美丽的..
·流行杀手的娃娃工厂__..
·打造8号台球__教程
·PHOTOSHOP制作待机MM图..
·用Photoshop帮MM做纹身..
·PHOTOSHOP美眉着色绝招..
·PHOTOSHOP花露的制作_..
·PHOTOSHOP渐变工具的巧..
·PHOTOSHOP手绘奥兰多-..
·高难度抠图两种方法__..
·Photoshop高尔夫球的制..
·Photoshop打造精美玉佩..
Eqxia_COM下载站 版权所有 Copyright© 2001-2005 Www.eqxia.COM, All Rights Reserved.