float布局问题汇总

1、在IE6下margin-left加倍问题

有一个父层、一个子层，当Inner块设置了margin-left，同时设置float属性为left，在IE6下会出现margin-left翻倍的问题。

解决办法：将inner块的设置display:inline就可以了。

2、有一个父层、两个字层，在两个字层之间添加注释，在IE6会出现文字“重影”现象

代码如下

#outter3{ width:500px; height:300px; background:#0F0; }
#inner31{ float:left; background:#F00; }
#inner32{ float:right; width:500px;}

 

<div id="outter3">
  <div id="inner31"></div>
  <!-- 左边内容结束 -->
  <!-- 左边内容结束 -->
  <!-- 测试三行注释 -->
  <div id="inner32">我是乖乖我怕谁</div>
</div>

会出现以下现象，且溢出文字的字数=注释的条数×2-1（如例子所示2×3-1为5个文字）

解决方法：直接去掉两个块之间的注释即可。

3、一个块设置了左浮动，另一个块以普通流文档方式显示，IE6会出现3px BUG。

#outter4{ width:600px; height:300px; background:#FF0; }
#inner41{ float:left; width:200px; background:#3CC; }
#inner42{ border:1px solid #000;}

 

<div id="outter4">
  <div id="inner41">这个设置了浮动</div>
  <div id="inner42">它没设置浮动,因此文字间出现了3像素bug，这个bug很让人头疼！咋办呢@@@</div>
</div>

结果在火狐和IE6下对比（火狐文字是紧靠左块的，IE6下有3个像素的间距）

解决办法：一种方法，将另一个元素设置相同的浮动方向（一个为left，另一个也要为left）；

另一种方法针对IE6设置负外边距，即margin-left:-3px。

4、子元素设置左右浮动后，最外层的父元素的高度没有随着子元素的高度而自动扩展。原因在于子元素浮动后，脱离了普通文档流，子元素不再占据父元素的空间，因而父元素的高度为设置内间距的高度，去掉内间距，则父元素的背景就不存在了。

#outter { width:200px; background:#3FF; border:1px solid #000;}
#inner { float:left; width:120px; height:80px; background:#FF3; }

 

<div id="outter">
  <div id="inner"></div>
</div>

显示结果是：

解决办法：一种方法是在inner后面增加一个div或span

<div style="clear:both;"></div>

这样就能将父元素撑开显示了

另一种方法是在父元素增加overflow:hidden