CSS浮动（Float）

页面布局有两种方式

1）浮动Float

2）定位Position

今天就通过一个小小的练习，通过引导的方式，理解Float的含义。

【例子】

要求：

1）两个方块，一个红色red，一个蓝色blue；

2）红色方块宽度和高度均为200像素，蓝色方块 宽度为300像素，高度为200像素；

3）红色方块和蓝色方块上外边距(margin-top)和左外边距(margin-left)均为20像素；

大家应该注意到了，虽然红色方块的宽度并不是100%，但是蓝色并未和红色处于同一行，这就是块状元素比较“霸道”的一点，（即使块状元素的宽度不是100%，它也不允许其他元素和他同在一行）为了消除这种“霸权”，让红色和蓝色方块都处在一行（如上图）。

此时就需要拿出我们的利器Float！只需要在红色方块的CSS里面加上“float:left;”，这时候在IE6中可以看到蓝色方块的确跑到红色方块的后面了，并且处于一行了，但是在FireFox、google chrome中却变成了如下效果：

这时候就需要注意了，FireFox、google chrome中如果前面的区域浮动了，后面的那个区域很有可能就会和前面的区域发生重叠并错位。

怎么才能解决这个问题，解决这个浏览器兼容的问题，很容易，只需要在蓝色方块的CSS代码中也加入“float:left;”，问题就解决了，加上试试，看看蓝色方块是不是和红色方块处于一行了~

细心的同学会注意到，在IE6中红色方块距离浏览器的左边距并不是CSS代码中定义的20像素，而是40像素，如下图：

其实这是IE6的一个BUG(IE6双倍边距BUG)，只要满足下面3个条件才会出现这个BUG:

1）要为块状元素；

2）要左侧浮动；

3）要有左外边距(margin-left)；

解决这个BUG很容易，只需要在相应的块状元素的CSS属性中加入“display:inline;”，现在再看看，是不是IE6和FireFox显示一样了呢~

代码如下：

[css]
.div1{display:inline;float:left;margin-top:20px;margin-left:20px;background:red; width:200px; height:200px;}
.div2{ float:left; margin-top:20px;margin-left:20px;background:blue; width:300px; height:200px;}
[/css]