学习DIV float在ff和ie下的布局区别-div float left

你对DIV float在ff和ie下的布局区别是否了解，这里和大家分享一下，DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

学习DIV float在ff和ie下的布局区别

基本HTML代码


 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
 
<head><title>DIVFloatSampletitle> 
 
<styletypestyletype="text/css">DIV{margin:3px;}.d1{width:250px;min-height:20px;border:1pxsolid#00cc00;}  
 
.d2{width:130px;min-height:40px;border:1pxsolid#0000cc;}  
 
.d3{width:100px;min-height:40px;border:1pxsolid#cc0000;}  
 
style>head> 
 
<body><DIVclassDIVclass="d1"> 
 
<DIVclassDIVclass="d2">   
 
DIV><DIVclassDIVclass="d3">   
 
DIV>DIV>body> 
 
html>

以上代码显示的结果如下，很正常，结果相同。

下面会在这个基础上进行修改，修改的内容都在style中，其他代码就不再重复写了。

请注意，这里的Style中用到了min-height，这个和height是不同的，min-height指定了对象的一个最小高度，当对象的子内容高度超过这个最小高度是，这个对象会自动撑大。这是一个非常牛的style，可惜的是，在这个style和float这个同样牛的style一起使用的时候，就会出现各种问题。#p#

◆内部一个DIV修改成为float:left

.d1{width:250px;min-height:20px;border:1pxsolid#00cc00;}  
 
.d2{width:130px;min-height:40px;border:1pxsolid#0000cc;float:left;}  
 
.d3{width:100px;min-height:40px;border:1pxsolid#cc0000;}

显示结果如下。

这个结果中，Firefox有点离谱了，两个框叠在一起也就罢了，为什么那个红框会变大捏？而且变的大小也很诡异，不知道是按照什么公式计算出来的。IE在这里的显示应当是附和标准的。

◆内部两个DIV都修改成为float:left

.d1{width:250px;min-height:20px;border:1pxsolid#00cc00;}  
 
.d2{width:130px;min-height:40px;border:1pxsolid#0000cc;float:left;}  
 
.d3{width:100px;min-height:40px;border:1pxsolid#cc0000;float:left;}

显示结果如下。

在这种情况下，Firefox的结果尚能解释，可能是float把外层的DIV也作为内层float影响的范围，这样内层的就不会将外层的DIV撑大了。IE在这里出现了Margin失效的情况，可以解释为内层第二个float造成了影响。#p#

◆干脆把外层的DIV也修改成为float:left

.d1{width:250px;min-height:20px;border:1pxsolid#00cc00;float:left;}  
 
.d2{width:130px;min-height:40px;border:1pxsolid#0000cc;float:left;}  
 
.d3{width:100px;min-height:40px;border:1pxsolid#cc0000;float:left;}

显示结果如下。

这种情况下，Firefox正常了，而IE延续了前面的不正常情况。

◆外层是float:left，内层最后一个不再float:left

.d1{width:250px;min-height:20px;border:1pxsolid#00cc00;float:left;}  
 
.d2{width:130px;min-height:40px;border:1pxsolid#0000cc;float:left;}  
 
.d3{width:100px;min-height:40px;border:1pxsolid#cc0000;}

显示结果如下。

这和前面第一种加float:left的情况相同。#p#

结论

再重申一次，本文讨论的是一个比较高级的话题。如果在style中用height而不是min-height来设定高度，是不会出现以上这些问题的。不过，不用min-height就失去了DIV自动撑大这一个很有必要的特性。在min-height和float:left的情况下，没有一种完美的写法让Firefox和IE结果相同。不过仍然可以发现绕开的方法。进一步试验可以发现，margin遭到的影响在padding上比较好，所以最好是padding和margin都不用，或者只用padding。

两者相同的代码如下：

DIV{padding:3px;}  
 
.d1{width:250px;min-height:20px;border:1pxsolid#00cc00;float:left;}  
 
.d2{width:130px;min-height:40px;border:1pxsolid#0000cc;float:left;}  
 
.d3{width:100px;min-height:40px;border:1pxsolid#cc0000;float:left;}

显示结果如下。

当然所有这些情况也许是有合理解释的，说不定增加某一个style的设置，这些问题都迎刃而解了，不过目前我还没有找到这个设置。

【编辑推荐】