CSS浮动模型可以说是标准布局中不可或缺组成部分可是对于浮动模型在IE6表现症状你是否已经完全了解或者掌握呢？如果你答案是肯定那恭喜你不用听我啰嗦了如果你答案是模糊那么下面讨论或许对你以后学习有所帮助

　　首先看下W3C对浮动模型部分解释(http://www.w3.org/TR/REC-CSS2/visuren.html):

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
　　Sinceafloatisnotheflow,non-positionedblockboxescreatedbeforeandafterthefloatboxflowverticallyasthefloatdidn\'texist.However,lineboxescreatednexttothefloatareenedtomakeroomforthefloatedbox.Anycontenthecurrentlinebeforeafloatedboxisreflowedhefirstavailablelineontheothersideofthefloat.
　　Afloatcanoverlapotherboxeshenormalflow(e.g.,whenanormalflowboxnexttoafloathasnegativemargins).Whenaninlineboxoverlapswithafloat,thecontent,background,andbordersoftheinlineboxarerenderedinfrontofthefloat.Whenablockboxoverlaps,thebackgroundandbordersoftheblockboxarerenderedbehindthefloatandareonlybevisiblewheretheboxistransparent.Thecontentoftheblockboxisrenderedinfrontofthefloat.



　　从中我们可以得到几个基本信息:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
　　1、如果浮动元素在非浮动块元素的后则浮动元素将会出现在非浮动块元素下方；
　　2、如果浮动元素在非浮动块元素的前则非浮动块元素内容将会显示浮动块元素行后
　　3、在浮动元素的后非浮动块元素会无视该浮动元素存在显示在和浮动元素开始位置浮动元素显示在非浮动块元素的上


　　那么让我们看看IE6是否也是按照这个原则来解析呢实际情况是IE6又开始了“个人英雄主义”和标准解析有所出入

　　那具体出入在那里出入大小如何下面我们用例子来分析(为了书写方便所有代码将把CSS直接带入到XHTML中):

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
<divstyle=\"float:left;\">这是浮动区块内容</div>
<p>这是非浮动段落</p>


　　如果对浮动div不设置宽度div宽度将按照实际内容宽度自适应为了后面直观表现和实验方便我们给浮动div设置宽度100px和高度100px并且为了更好区分元素区域我们分别给浮动div和非浮动p设置背景色给浮动div设置margin-top值修改如下:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
<divstyle=\"float:left;width:100px;height:100px;background:#e00;margin-top:10px;\">这是浮动区块内容</div>
<pstyle=\"background:#ccc;\">这是非浮动段落</p>


　　测试IE6和Firefox浏览器我们会发现非浮动块元素p在没有设置宽度情况下占据整个显示区域宽度(或者准确点说是占据所在容器整个宽度)

\" border=\"0\" alt=\"\"/>

　　下面我们将对非浮动元素p设置宽度非auto值比如width:200px或者width:20%这时我们会发现IE6和Firefox下发生了变化

\" border=\"0\" alt=\"\"/>

　　Firefox还是按照上面解析方式来解析而IE却不再是开始解析为从浮动元素右侧边开始计算宽度或许有人问这是为什么呢其实这个是有根源是IElayout问题如果你对layout还不熟悉依然推荐阅读old9翻译Onhavinglayout



　　最后建议对浮动元素后非浮动块元素尽量不要制定其宽度或高度以便引起IE6“个人英雄主义”而改换使用margin来定位注意:如果浮动元素不是图片则在IE下两个元素的间会产生3个像素间隙BUG详情请看:两个层的间为什么会有间隙(IE3pxbug)？http://www.52css.com/article.asp?id=146