IE/非IE对float浮动与非浮动块对象自动宽度之间关系不同解析方式的实例研究

这段时间泡蓝色理想的WEB标准化专栏，也着实生出了许多平时不曾进行的思考，一直以来的浮躁好像在我身上慢慢地淡去，也许年龄的增长真的会对人的品性影响非凡，希望同在我这个年龄段（23-30）的人都要把握好自己的人生，这重要的磨砺阶段错过了就一去不再复返。

摘要：
IE认为指定了float的元素旁边如果有未指定float的块元素，那么该元素占有绝对高度和宽度，那个块元素的宽度自动缩减；
非IE浏览器则不这么认为，它们认为指定了float的元素不应该占有绝对高度，相应的旁边那个块元素的宽度不应该全部缩减，仍然应该体现“浮动”的实际意义，宽度该缩减就缩减，不该缩减就继续铺满。

但我不明白的是，为什么在例1和例3中，背景颜色要始终是铺满的呢？

源代码如下，请自行保存为html格式查看：

<style>
h1 {
font-size:1.5em;
}
h2 {
font-size:1em;
margin:0;
}
cite {
color:#c30;
font-weight:bold;
}
em {
color:#f00;
font-weight:bold;
}
.abtn {
height:18px;
width:18px;
display:block;
background:#f00 url(http://bbs.blueidea.com/images/blue/smilies/icon11.gif) no-repeat 0 0;
}
.abtn span {
display:none;
}
.fright {
float:right;
}

.ul_a {
margin:1em 0;
padding:0;
list-style:none;
height:50px;
background-color:#9cf;
}
.ul_a li {
background-color:#69c;
}

.mgl_a {
margin-left:30%;
}
.mgl_b {
margin-left:1em;
}

.layout_a {
width:100%;
height:200px;
background-color:#ccc;
margin-bottom:1em;
}
.layout_a .left {
float:left;
width:30%;
height:50%;
background-color:#069;
}
.layout_a .right {
font-size:12px;
height:80%;
background-color:#996;
}
.layout_a .percent100,
.layout_a .percent50,
.layout_a .percent20 {
text-align:center;
height:18px;
line-height:18px;
}
.layout_a .percent100 {
width:100%;
background-color:#009999;
}
.layout_a .percent50 {
width:50%;
background-color:#996666;
}
.layout_a .percent20 {
width:20%;
background-color:#996699;;
}
</style>

<h2>以下内容请在IE和非IE浏览器中对比：</h2>

<a href="" title="没有加样式的a按钮"><span>没有加样式的a按钮</span></a>


<ul class="ul_a">
<li><a href="" class="abtn fright" title="加了样式的a按钮"><span>加了样式的a按钮</span></a>结构上，设置了float:left;的a按钮在此文本区域的左边</li>
</ul>
<ul class="ul_a">
<li>结构上，设置了float:left;的a按钮在此文本区域的右边<a href="" class="abtn fright" title="加了样式的a按钮"><span>加了样式的a按钮</span></a></li>
</ul>

<div class="layout_a">
<h2>例1：IE似乎把指定了float的对象自动赋予了宽度，并具有100%高度？</h2>
<div class="left">此处30%宽度，float:left;</div>
<div class="right">
自动宽度，float:none，没有设置 margin-left:30%;<br />
非IE浏览器中，背景色是铺满父对象的，但是从居中的文本以及<cite>例3</cite>可以看出，容器中的元素宽度计算方法是：如果左侧有浮动，那么内部元素宽度 = 容器百分比的宽度 - 浮动对象的30%宽度，如果相减宽度为负值，那么显示在浮动对象的下面。
<div class="percent100">此div的宽度设置了100%</div>
<div class="percent50">此div的宽度设置了50%</div>
<div class="percent20">此div的宽度设置了20%</div>
<div class="percent100">此div的宽度设置了100%</div>
<div class="percent50">此div的宽度设置了50%</div>
</div>
</div>

<div class="layout_a">
<h2>例2：这里在各个浏览器看都一样。</h2>
<div class="left">此处30%宽度，float:left;</div>
<div class="right mgl_a">
自动宽度，float:none，这里设置了 margin-left:30%;<br />
所有浏览器中，背景色只在这里出现。
<div class="percent100">此div的宽度设置了100%</div>
<div class="percent50">此div的宽度设置了50%</div>
<div class="percent20">此div的宽度设置了20%</div>
<div class="percent100">此div的宽度设置了100%</div>
<div class="percent50">此div的宽度设置了50%</div>
</div>
</div>

<div class="layout_a">
<h2>例3：这里仅仅是<cite>例1</cite>中的left指定了margin_left值。</h2>
<div class="left mgl_b">此处30%宽度，float:left;</div>
<div class="right">
自动宽度，float:none，没有设置 margin-left:30%;<br />
非IE浏览器中，背景色是铺满父对象的，但是从居中的文本可以看出，容器中的元素宽度计算方法是：如果左侧有浮动，那么内部元素宽度 = 容器百分比的宽度 - 浮动对象的30%宽度，如果相减宽度为负值，那么显示在浮动对象的下面。
<div class="percent100">此div的宽度设置了100%</div>
<div class="percent50">此div的宽度设置了50%</div>
<div class="percent20">此div的宽度设置了20%</div>
<div class="percent100">此div的宽度设置了100%</div>
<div class="percent50">此div的宽度设置了50%</div>
</div>
</div>

<p>
<h1>总结：</h1>
IE认为指定了float的元素旁边如果有未指定float的块元素，那么该元素占有绝对高度和宽度，那个块元素的宽度自动缩减；
非IE浏览器则不这么认为，它们认为指定了float的元素不应该占有绝对高度，相应的旁边那个块元素的宽度不应该全部缩减，仍然应该体现“浮动”的实际意义，宽度该缩减就缩减，不该缩减就继续铺满。
</p>
<em>但我不明白的是，为什么在例1和例3中，背景颜色要始终是铺满的呢？</em>

收藏到网摘：新浪VIVI  365Key  POCO网摘  和讯网摘  我摘