• 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;





    效果例如以下:



  • 相关阅读:
    VMware Workstation的三种网络连接方式
    sql:unix下的sql操作
    linux脚本: makefile以及链接库
    unix shell: ksh fundamental(Korn Shell)
    linux c: core dump
    linux命令:scp
    Eclipse更改默认工作目录的方法
    linux: 可重入函数与不可重入函数
    linux环境 :Linux 共享库LIBRARY_PATH, LD_LIBRARY_PATH 与ld.so.conf
    linux命令:Linux命令大全
  • 原文地址:https://www.cnblogs.com/yutingliuyl/p/7009180.html
Copyright © 2020-2023  润新知