清除网页浮动CSS的做法

2019-03-14 20:22:01王旭

  ● 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 可以用嘛。