zoukankan      html  css  js  c++  java
  • 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;





    效果例如以下:



  • 相关阅读:
    poj 2485 Highways 最小生成树
    hdu 3415 Max Sum of MaxKsubsequence
    poj 3026 Borg Maze
    poj 2823 Sliding Window 单调队列
    poj 1258 AgriNet
    hdu 1045 Fire Net (二分图匹配)
    poj 1789 Truck History MST(最小生成树)
    fafu 1181 割点
    减肥瘦身健康秘方
    人生的问题
  • 原文地址:https://www.cnblogs.com/yutingliuyl/p/7009180.html
Copyright © 2011-2022 走看看