【2】CSS-块状元素与内联元素

在前面例子中，为了达到浏览器兼容性，我们分别在红色蓝色方块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>
  
    

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