垂直间距问题
浮动元素与块状元素之间间距为上下外边距之和。但是如果浮动元素在上面,块状元素在下面,由于浮动环绕关系将使得它们之间的间距变得很复杂。对于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的。