总结网页制作中闭合浮动元素的几个方法

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

<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的方法：

.gainlayout{display:inline-block;}
.gainlayout{display:block;}

对display:inline-block这个属性还不是很了解，还要继续找资料。

关键词：

【推荐给好友】【关闭】

最新五条评论

查看全部评论

评论总数 0 条

您的评论

用户名： （新注册） 密　码： 匿名：

·用户发表意见仅代表其个人意见，并且承担一切因发表内容引起的纠纷和责任
·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据
·请客观的评价您所看到的资讯，提倡就事论事，杜绝漫骂和人身攻击等不文明行为

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有