按照CSS规范标准
浮动元素(floats)会被移出文档流不会影响到块状盒子
布局而只会影响内联盒子(通常是文本)排列
因此当其高度超出包含容器时
般父容器不会自动伸长以闭合浮动元素但是有时我们却需要这种自动闭合行为具体如何处理呢？有
种做法就是在父容器内再插入个额外标签并令其清除浮动(clear)以撑大父容器这种思路方法浏览器兼容性好没有什么问题缺点就是需要额外(而且通常是无语义)标签所以我个人不大喜欢后来又有了种新方式使用 :after 伪类动态嵌入个用于清除浮动元素这种思路方法和上种原理样区别只是把这个额外内容用 CSS 生成但考虑到 IE 不支持 :after 不得不做了不少 hack这种思路方法兼容性般但经过各种 hack 也可以应付区别浏览器了同时又可以保证 html 比较干净所以用得还是比较多再后来又有人发现将父容器 overflow 设为除 visible 的外值就可以在标准兼容浏览器中闭合浮动元素IE自然又是不支持所以这种思路方法和上种思路方法样都对 IE 做了区别处理(具体就是触发layout)区别就是overflow 没有 :after 伪类那么麻烦了缺点也有overflow 可能会产生些小冲突在使用 overflow 的前还有过种使用 float 思路方法就是让父容器也浮动这利用到了浮动元素个特性——浮动元素会闭合浮动元素这种方式在 IE/Win 和标准兼容浏览器中都有较好效果但缺点也很明显——父容器未必想浮动就浮动了毕竟浮动是种比较特殊行为有时布局不允许其浮动也很正常使用 float 虽然在 IE 和标准兼容浏览器中都能闭合浮动元素但原理却是区别IE/Win 中 float 触发了 layout 因而闭合了浮动而在标准兼容浏览器中float 其实和上种思路方法中 overflow 原理样产生了个“块级格式化范围”——这是CSS 规范标准中提到种现象它往往具有某种独立性特性的就是会自动闭合内部浮动元素按照规范标准
以下类型元素会产生个块级格式化范围:浮动元素
left 或者 right 皆可 绝对定位
元素 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 可以用嘛
最新评论