相关文章
什么是垂直搜索引擎
企通互联入门：如何把网页特效代码加到自己的网页中
网站建设Photoshop轻松绘制简洁的绿色网页按钮
网站设计关于网站制作规范的探讨
北京网站设计网页自动转向代码
网站设计Photoshop调整图片对比度的方法
网站建设浅议 Web 网页 Form 表单设计技巧
网站制作用CSS样式表来定义博客上的链接样式
网站设计建站必备：23个符合Web标准的网站导航菜单
企通互联Fireworks绘制硬壳厚皮烫金书
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网页设计 >> 北京网站制作北京网站制作总结网页制作中闭合浮动元素的几个方法
北京网站制作北京网站制作总结网页制作中闭合浮动元素的几个方法
在页面制作过程当中，我们曾经遇到过这样的问题，当浮动元素高度增加，而超出其父容器时，父容器不会随着它的高度增加而变长。比如 中.国站长站
| 以下为引用的内容：网站制作 <div id="main"> 北京网站制作 中国站.长站 |
当我们需要这样的效果，闭和浮动元素，通常是增加一个一个div，赋予它一个class让它清除两端，就是clear:both。下面是css 中.国.站.长.站
|
以下为引用的内容：网页设计 站.长.站
|
这种方法兼容性好，但是多了一段没有语义的代码。所以，我们还有一些其他的方法。 中国站长.站
在标准化的范围里，当元素被赋予以下几种属性，就可以闭合浮动元素。 Chinaz
1. float 网站建设浮动元素，left 北京网站制作或者 right 都可以。
Www_Chinaz_com
2. position:relative 绝对定位的元素。 中国站长.站
3. display:inline-block(inline-block对象显示为内嵌元素，但所有子对象都显示为块元素，相邻的内嵌元素将显示在同一行，允许空格。这个方法以gecko为核心的浏览器比如firefox目前不支持)。 Chinaz_com
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 都可以。 Chinaz@com
2. position:relative 绝对定位的元素。
3. display:inline-block
4. zoom
Chinaz.com
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;} 北京网站设计 Chinaz.com |
对display:inline-block这个属性还不是很了解，还要继续找资料。
站.长站
