浮动和清除浮动

页面布局有两种方式
1）浮动Float
2）定位Position
要求：
1）两个方块，一个红色#900，一个蓝色#009；
2）红色方块宽度和高度均为200像素，蓝色方块 宽度为300像素，高度为200像素；
3）红色方块和蓝色方块上外边距(margin-top)和左外边距(margin-left)均为20像素；

页面效果如下：

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

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

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

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

        在上个例子中，为了达到浏览器兼容性，我们在红色、蓝色方块CSS代码中分别加了“float:left;”，这样IE和FF中显示效果一样，如果此时我们还想放一个宽度400像素，高度100像素的绿色方块，并让其处于第二行，希望效果如下图：

可是这时候不管怎么放，在IE中的效果始终是：

        导致绿色排到蓝色的后面这种情况就是因为蓝色方块CSS代码中含有"float:left;"，但是为了浏览器兼容性，又不能去掉，只要在CSS代码中加入下面这段代码：

 .clear{clear:both;}

并在HTML代码中加入下面代码：

   <div class="clear"></div>

上面这句话究竟加在哪个位置呢，要加在蓝色方块和绿色方块中间，然后看看效果是不是我们想要的了~^_^

    <div id="redBlock">博客的左侧</div>
            <div id="blueBlock">博客的右侧</div>
            <div class="clear"></div>
            <div id="greenBlock">博客的版权信息</div>

目的就是为了清除蓝色方块的浮动对下面绿色方块的影响！是 影响哟~是 清除影响，而 不是清除蓝色方块的浮动，或者说清除蓝色方块的浮动对下面区域块产生的作用！（仔细品品我说的这句话！）