CSS教程:弄懂闭合浮动元素
作者 佚名技术
来源 CSS技术
浏览
发布时间 2012-03-05
● inline-block 元素，不过这个 gecko目前不支持。 ● table-cell 类型元素，其实 table, table-head-group, table-row 什么的也都可以，还有inline-table（gecko不支持）也同样，因为他们都会间接产生一个匿名的 table-cell。 ● overflow 取值非 visible 的元素。 所以，原来在标准兼容浏览器中我们也可以有这么多的方法闭合一个浮动元素，而且只需要 CSS，无需其他。顺带说一下以上除了overflow，其余都有一个附加效果就是自动收缩父容器宽度。 而对于 IE/Win，它有一套自己的体系，就是 layout，具有 layout 的元素会自动闭合浮动元素，再来看看触发 layout 的 CSS 属性，会发现和上面的块级格式化范围有很多类似之处： ● 浮动元素 ● 绝对定位元素 ● display:inline-block ● zoom ● width/height ● overflow/overflow-x/overflow-y [IE7 新增] ● max/min-width/height [IE7 新增] 以上来看 IE 中闭合浮动元素的方法也不少，自然也都有其局限性，要么有附带效果，要么使用的是非标准属性（无法通过验证）。 还要提一点的是 display:inline-block，这个属性对 IE 而言本身没什么用，实际效果只是给一个元素暗地添加了 layout，但是标准兼容浏览器是认得这个属性的，所以要不影响这些浏览器，需要将 display 设回默认。这里 IE 有一个 bug，如果先定义了 display:inline-block，然后再将 display 设回 block（这两个 display 要先后放在两个 CSS 声明中才有效果），那么 layout 不会消失，同时也不会影响其他浏览器，所以目前来说，这也算一个不错的触发 layout 的方法： .gainlayout{display:inline-block;} .gainlayout{display:block;} 所以要跨浏览器闭合浮动元素，可以选择的方式还是很多的，如何搭配使用这些 CSS 属性就要具体情况具体分析了，灵活应用条件注释也很有必要，要是实在不行我们回过头来还有 clear 可以用嘛。 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
你可能对下面的文章感兴趣
上一篇: CSS编写中灵活运行注释的意义下一篇: 符合WEB标准的网页图像的代码精简
关于CSS教程:弄懂闭合浮动元素的所有评论
