CSS demo:flaot & clear float

     

       1,首先,我们布局基本的div块:


        如下代码所示,我们在body里面写3几个基本div块,然后设置一些基本属性:



 


      效果图:

   


     

   2,加入基本浮动

       

现在我们想让红色div放到绿色div右边,我们在两个div中加入浮动


    



效果图:


   3,添加一个处于标准流的div

   




    

效果图:




添加了一个处于标准流的div中,可以很明显的看出一种float的效果,红块div和绿块div像云一样漂浮在橘黄色div上面,这个效果很贴切的符合float这个词。

 

但是可以明显的看出,浮动会带来一个遮盖的不良效果,然而在真正的网页设计中,我们却并不需要这种遮盖的效果。

 


接下来演示如何清除浮动:

 



4,首先我们将红块右移动



   

效果图:






5,现在我想让大块不被覆盖

 

清除橘黄色块的左浮动:




效果:




6,为了能更清楚看清浮动的影响,现在,我们,改变下大小:将红色div的高度加长,并将橘黄色div长度清除




效果:





7,接着我们为黄色div清除右浮动,然后将绿色div加长:






效果:


 可以看出黄色div的上边紧贴着红色div的下边,但是因为绿色div加长,又有一个遮盖的效果:






8,为了既能清除左浮动,又能清除右浮动,I‘ll take both;





效果如下:



郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。