Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  正文 总结网页制作中闭合浮动元素的几个方法

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

发布时间:2019-11-09   编辑:www.jquerycn.cn
jquery中文网为您提供总结网页制作中闭合浮动元素的几个方法等资源,欢迎您收藏本站,我们将为您提供最新的总结网页制作中闭合浮动元素的几个方法资源
<script>ec(2);</script>

在页面制作过程当中,我们曾经遇到过这样的问题,当浮动元素高度增加,而超出其父容器时,父容器不会随着它的高度增加而变长。比如
<div id="main">
  <div id="box1">box1</div>
  <div id="box2">box2</div>
  <div class="clean"></div>
</div>
当我们需要这样的效果,闭和浮动元素,通常是增加一个一个div,赋予它一个class让它清除两端,就是clear:both。下面是css

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy6288')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy6288>#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;}
</td> </tr> </table>

这种方法兼容性好,但是多了一段没有语义的代码。所以,我们还有一些其他的方法。
在标准化的范围里,当元素被赋予以下几种属性,就可以闭合浮动元素。
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的方法:

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy8015')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy8015>.gainlayout{display:inline-block;}
.gainlayout{display:block;}
</td> </tr> </table>

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

</td> </tr> </table>

您可能感兴趣的文章:
jQuery powerFloat万能浮动层下拉层插件使用介绍
jQuery设计思想完整篇
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
jQuery代码优化 事件委托篇
从零开始学习jQuery (三) 管理jQuery包装集
jquery常用技巧及常用方法列表集合
jQuery 常见开发使用技巧总结
jQuery语法总结和注意事项小结
Jquery 常用方法经典总结
jQuery技巧总结

[关闭]