各种浏览器css浮动问题

  Firefox 中发现一个与定位相关的 bug 是 Top Gap Bug。这个 bug 通常都会出现于多栏布局，其中栏是浮动的，而 header section 却不是。如果其中某个栏中的某个元素具有上边框，那么此边框会被推至 header 之上，导致窗口顶部和 header 顶部之间出现间隙。修复的手段是在被浮动栏上放一些东西。一种方式是向具有 clear:both 属性的头的底部添加一个元素。另一种方式是让 header 也浮动。

下面介绍几种技术来消除对 HTML 文档添加额外标记的需要。这些技术包括：

• 向容器元素添加 “float”。
• 向容器元素添加 “overflow:hidden”。
• 在容器元素上添加一个 CSS2 “:after” 伪类。

  一、浮动容器技术（Float Container Technique）：该技巧常常见于页面布局和水平导航菜单 — 在浮动容器内放上一个浮动元素。浮动容器会被扩大以包含所有内部的浮动元素。这种方式需要准确设置容器的宽度属性，100% 是常见的一种设置。 这种技术有几个缺点。第一个缺点是很难设置宽度，使用 100% 可能会与留白冲突。第二，Internet Explorer V6 可能还会添加额外的底边框。最后，浮动框的深度嵌套常常会导致在浏览器中产生某些不可预知的行为。 这种浮动容器技术所使用的 CSS 代码如下。 .clearfix {     float: left;     width: 100%; }

  二、隐藏溢出容器技术（Hidden Overflow Container Technique）：这种方式很少使用。它涉及了对 “overflow” 属性和默认的 “clip” 属性的利用 — 一个溢出 元素会被扩至所有所含子元素（包含被浮动元素）的大小。 这种技术也有几个缺点。首先，使用溢出可能会影响容器的 fluid height。其次，溢出需要触发 Internet Explorer V6 的 “hasLayout” 属性。 隐藏溢出容器技术所使用的 CSS 代码如下： .clearfix {     overflow: hidden;     height: 1%;     /* Or zoom:1 to trigger IE's hasLayout */ }

• 三、:after 伪类技术：这种方式极少使用。它所涉及的是使用 CSS 伪类在容器后生成内容。使用 :after 伪类技术向结果 HTML 文档追加已指定 clear 属性的新元素。

  这种技术最不推崇，提供支持的浏览器也少。Internet Explorer V7 或更早的版本不支持 :after 伪类技术。但最为重要的是，这种技术会将无意义的内容插入到结果 HTML 文档。

  下面是 :after 伪类技术所使用的 CSS 代码。 （ff中border的bug解决方法） .clearfix {     height: 1%;     /* Or zoom:1 to trigger IE's hasLayout */ } /*clear both*/ .clearfix :after {     content: ".";     display: block;     height: 0;     clear: both;     visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac /*/ * html .clearfix {height: 1%;} *+html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */