CSS浮动模型可以说是标准布局中不可或缺
![](/icons/18708de.gif)
组成部分
![](/icons/18708dou.gif)
可是对于浮动模型在IE6
![](/icons/18708de.gif)
表现症状你是否已经完全了解或者掌握呢?如果你
![](/icons/18708de.gif)
答案是肯定
![](/icons/18708de.gif)
![](/icons/18708dou.gif)
那恭喜你不用听我
![](/icons/18708de.gif)
啰嗦了
![](/icons/18708dou.gif)
如果你
![](/icons/18708de.gif)
答案是模糊
![](/icons/18708de.gif)
![](/icons/18708dou.gif)
那么下面
![](/icons/18708de.gif)
讨论或许对你以后
![](/icons/18708de.gif)
学习有所帮助
![](/icons/18708dou2.gif)
首先看
![](/icons/18708yi.gif)
下W3C对浮动模型部分解释(http://www.w3.org/TR/REC-CSS2/visuren.html):
![](\"http://www./Files/BeyondPic/2007-5/24/0752416101371975.g<img)
\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code
[www.52css.com] Sinceafloatisnot
![](/icons/18708int.gif)
heflow,non-positionedblockboxescreatedbeforeandafterthefloatboxflowverticallyas
![](/icons/18708if.gif)
thefloatdidn\'texist.However,lineboxescreatednexttothefloatare
![](/icons/18708short.gif)
enedtomakeroomforthefloatedbox.Anycontent
![](/icons/18708int.gif)
hecurrentlinebeforeafloatedboxisreflowed
![](/icons/18708int.gif)
hefirstavailablelineontheothersideofthefloat.
Afloatcanoverlapotherboxes
![](/icons/18708int.gif)
henormalflow(e.g.,whenanormalflowboxnexttoafloathasnegativemargins).Whenaninlineboxoverlapswithafloat,thecontent,background,andbordersoftheinlineboxarerenderedinfrontofthefloat.Whenablockboxoverlaps,thebackgroundandbordersoftheblockboxarerenderedbehindthefloatandareonlybevisiblewheretheboxistransparent.Thecontentoftheblockboxisrenderedinfrontofthefloat.
从中我们可以得到几个基本信息:
![](\"http://www./Files/BeyondPic/2007-5/24/0752416101371975.g<img)
\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code
[www.52css.com] 1、如果浮动元素在非浮动块元素的后
![](/icons/18708dou.gif)
则浮动元素将会出现在非浮动块元素
![](/icons/18708de.gif)
下方;
2、如果浮动元素在非浮动块元素的前
![](/icons/18708dou.gif)
则非浮动块元素内容将会显示浮动块元素行后
![](/icons/18708dou2.gif)
3、在浮动元素的后
![](/icons/18708de.gif)
非浮动块元素会无视该浮动元素
![](/icons/18708de.gif)
存在
![](/icons/18708dou.gif)
显示在和浮动元素开始
![](/icons/18708de.gif)
位置
![](/icons/18708dou.gif)
浮动元素显示在非浮动块元素的上
![](/icons/18708dou2.gif)
那么让我们看看IE6是否也是按照这个原则来解析
![](/icons/18708de.gif)
呢
![](/icons/18708dou2.gif)
实际情况是
![](/icons/18708dou.gif)
IE6又开始了“个人英雄主义”
![](/icons/18708dou.gif)
和标准解析有所出入
![](/icons/18708dou2.gif)
那具体出入在那里
![](/icons/18708dou.gif)
出入大小如何
![](/icons/18708dou.gif)
下面
![](/icons/18708dou.gif)
我们用例子来分析(为了书写
![](/icons/18708de.gif)
方便
![](/icons/18708dou.gif)
所有代码将把CSS直接带入到XHTML中):
![](\"http://www./Files/BeyondPic/2007-5/24/0752416101371975.g<img)
\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code
[www.52css.com]<divstyle=\"float:left;\">这是浮动区块内容
![](/icons/18708dou2.gif)
</div>
<p>这是非浮动
![](/icons/18708de.gif)
段落</p>
如果对浮动
![](/icons/18708de.gif)
div不设置宽度
![](/icons/18708dou.gif)
div
![](/icons/18708de.gif)
宽度将按照实际内容
![](/icons/18708de.gif)
宽度自适应
![](/icons/18708dou.gif)
为了后面
![](/icons/18708de.gif)
直观表现和实验
![](/icons/18708de.gif)
方便
![](/icons/18708dou.gif)
我们给浮动div设置宽度100px和高度100px
![](/icons/18708dou.gif)
并且为了更好
![](/icons/18708de.gif)
区分元素
![](/icons/18708de.gif)
区域
![](/icons/18708dou.gif)
我们分别给浮动div和非浮动
![](/icons/18708de.gif)
p设置背景色
![](/icons/18708dou.gif)
给浮动div设置margin-top值
![](/icons/18708dou.gif)
修改如下:
![](\"http://www./Files/BeyondPic/2007-5/24/0752416101371975.g<img)
\" 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;\">这是非浮动
![](/icons/18708de.gif)
段落</p>
测试IE6和Firefox浏览器
![](/icons/18708dou.gif)
我们会发现非浮动块元素p在没有设置宽度
![](/icons/18708de.gif)
情况下
![](/icons/18708dou.gif)
占据整个显示区域
![](/icons/18708de.gif)
宽度(或者准确点说
![](/icons/18708dou.gif)
是占据所在
![](/icons/18708de.gif)
容器
![](/icons/18708de.gif)
整个宽度)
![](/icons/18708dou2.gif)
![](\"http://www./Files/BeyondPic/2007-5/24/0752416101311408.g<img)
\" border=\"0\" alt=\"\"/>
下面我们将对非浮动元素p设置宽度非auto值
![](/icons/18708dou.gif)
比如width:200px或者width:20%
![](/icons/18708dou.gif)
这时我们会发现IE6和Firefox下
![](/icons/18708dou.gif)
发生了变化
![](/icons/18708dou2.gif)
![](\"http://www./Files/BeyondPic/2007-5/24/0752416101382314.g<img)
\" border=\"0\" alt=\"\"/>
Firefox还是按照上面
![](/icons/18708de.gif)
解析方式来解析
![](/icons/18708dou.gif)
而IE却不再是
![](/icons/18708dou.gif)
开始解析为从浮动元素
![](/icons/18708de.gif)
右侧边开始计算宽度
![](/icons/18708dou2.gif)
或许有人问这是为什么呢
![](/icons/18708dou.gif)
其实这个是有根源
![](/icons/18708de.gif)
![](/icons/18708dou.gif)
是IE
![](/icons/18708de.gif)
layout问题
![](/icons/18708dou.gif)
如果你对layout还不熟悉
![](/icons/18708dou.gif)
依然推荐阅读old9翻译
![](/icons/18708de.gif)
![](/icons/18708smhl.gif)
Onhavinglayout
![](/icons/18708smhr.gif)
最后建议对浮动元素后
![](/icons/18708de.gif)
非浮动块元素
![](/icons/18708dou.gif)
尽量不要制定其宽度或高度
![](/icons/18708dou.gif)
以便引起IE6
![](/icons/18708de.gif)
“个人英雄主义”
![](/icons/18708dou.gif)
而改换使用margin来定位
![](/icons/18708dou2.gif)
注意:如果浮动元素不是图片
![](/icons/18708dou.gif)
则在IE下
![](/icons/18708dou.gif)
两个元素的间会产生3个像素
![](/icons/18708de.gif)
间隙BUG
![](/icons/18708dou.gif)
详情请看:两个层的间
![](/icons/18708de.gif)
为什么会有间隙(IE3pxbug)?http://www.52css.com/article.asp?id=146