浮动bug的解决方法（续）——浮动间距问题

垂直间距问题

浮动元素与块状元素之间间距为上下外边距之和。但是如果浮动元素在上面，块状元素在下面，由于浮动环绕关系将使得它们之间的间距变得很复杂。对于IE浏览器来说，不管上下位置如何，它们之间的间距仍然为上下外边距之和。而在其他版本浏览器中，由于在解析浮动环绕问题上的差异，它们之间的间距就变得很复杂。如下面的实例：

在IE9中的显示效果为：

在firefox中的显示效果为：

在firefox中，上下间距实际上仅取浮动元素的外边距，而下边的块状元素的顶部外边距和背景色都跑到了页面顶部，出现块状元素与内容分离的状态。

解决的方法是：为块状元素增加clear属性。强制其不要越过浮动元素，但是它们的间距仍然为浮动元素的底部外边距

对于浮动元素与行内元素之间的间距，由于行内元素的外边距不影响任何元素，因此它们之间的垂直距离可以取浮动元素的外边距。

水平间距问题

浮动布局中元素水平间距并没有垂直间距复杂，一般不会出现边距重叠现象。但是由于IE浏览器的bug，特别是IE6及其以下版本浏览器的bug太多，从而产生很多布局兼容问题。

如果一个浮动元素定义了外边距，则浮向一边的外边距会加倍显示。这个问题在IE6及其以下版本浏览器中存在。例如下面的示例代码：

此时在IE7及其以上版本的显示效果为：

在IE6及其以下版本的显示效果为：

此类问题的解决方法比较简单，只要在浮动元素中增加display：inline；规则即可：

.box2 {float:left;  display:inline;}

此时display：inline；规则不能够改变浮动元素的显示状态，仅起到消除IE浏览器中的bug的作用，浮动元素依然显示为一个块状元素。

如果当浮动元素与一个非浮动元素并列显示时，则元素之间会多出3个像素的缩进空隙。这个问题在IE6及其以下版本浏览器中存在。如下面实例：

在IE6及其以下版本中的显示效果：                         在IE7及以上版本中的显示效果：

           

解决这类问题的方法如下：

*html div{margin：-3px;}

*html p{height:1px;}

此类问题在网页布局中一般不会破坏页面整体效果，如果不仔细观察，可能还不会注意到这个细节。如果要求不是很苛刻，可以不管它。当然也可以使用上面的兼容方法解决这个问题。

浮动元素的清除方法

1、通过overflow属性将浮动清除

在容器上设置一个overflow属性，可以清除其内部的任何浮动元素，此方法简单且易实现，可以适用于绝大多数环境下。（参考Alex Walker在SitePoint上的文章：http://www.sitepoint.com/2005/02/26/ ）

比如下面的例子：

#sweden dl{

    float:left;

    width:260px;

    margin:0; padding:0;

    display:inline;

}

可以用overflow：auto替换，也会得到相同的效果

#sweden dl{

    overflow：auto;    

    width:260px;

    margin:0; padding:0;

}

在这里上面的display属性也没有了。在这里不需要这个属性，上面出现是用于修复IE里面出现的float时所产生的边距，而现在不再需要float，所以也不需要display属性了

2、通过内容生成来轻松处理

这种方法是通过CSS中的：after伪对象，在浮动容器的后面插入一个区域，在其中添加clear：both规则来清除所有的浮动，然后将该区域隐藏起来：

#sweden dl{

    width:260px;

    margin:0;

    padding:0;

}

#sweden dl:after{

    content:”.”;

    display:block;

    height:0;

    clear:both;

    visibility:hidden;

}

上面代码的实质：在每个定义列表的后面添加一个区域（由content：”.”;来完成），将它前面所有的浮动清除掉（clear:both;)，然后确保该区域被隐藏（height:0;以及visibility:hidden;）。通过使用：after伪对象将所有浮动元素清除，不需要将容器浮动就可以达到效果，所以我们不必担心像overflow那样在将来可能会发生问题。

在IE5和IE6中进行自清除

*html #sweden dl{height:1%;}

在IE/WIN平台下，只要给容器设置了尺寸，容器就会自动清除。

解决IE7的问题

IE7解决了IE6以前的很多bug，修复了height：1%；漏洞，也忽略了*html选择器开头的声明，但是：after伪对象还不被IE7支持，所以上面的两种方法都不能解决IE7里面的问题，如果要解决这个问题，可以使用下面的代码：

*first-child+html #sweden dl{min-height:1px;}

在IE7中，为容器设置了一个min-height属性也会是容器扩展，其方式同在IE6中使用height一致。位于#sweden dl前面的选择符是仅针对IE7的。