浅谈float浮动

float大概是css3以前网页布局里最常用的一个属性了，经常看到一言不合就浮动的代码，就一起来深入挖掘一下这个一半天使一半魔鬼的属性吧。

本文是读张鑫旭大神慕课网float视频后的一些总结及一些拓展用法，视频地址：http://HdhCmsTestimooc测试数据/learn/121。该视频初读很枯燥，认真读后会发现更枯燥。。。。。。不过遇到坑之后再去读就会发现良心视频，字字珠玑。闲话不多说，现在开始：

1. float的起源

　　浮动最初的设计是用来做文字的环绕效果的，这也是设计者想让我们做的东西。

2. float的参数

　　float属性的参数取值有三个：

　　left：表示元素浮动在左边。

　　right：表示元素浮动在右边。

　　none：对象不浮动，遵循标准文档流。

3. 效果展示 （以float：left为例，float：right的情况只是位置的不同）

   style  >   
div  {  
    height  :   20px  ; 
 }  
    .d1  {  
        width  :   50px  ;  
        background  :   hsl(100,50%,80%)  ; 
     }  
    .d2  {  float  :   left  ;  
        width  :   100px  ;  
        background  :   hsl(150,50%,80%)  ; 
     }  
    .d3  {  
        width  :   250px  ;  
        height  :   100px  ;  
        background  :   hsl(10,50%,80%)  ; 
     }  
    .d4  {  float  :   left  ;  
        width  :   300px  ;  
        background  :   hsl(250,50%,80%)  ; 
     }  
    span  {  
        margin-right  :   3px  ;   
        border-right  :   solid 1px #ccc  ;  
        background-color  :   hsl(60,50%,80%)  ; 
     }  
    .s3  {  
        float  :  left  ; 
     } 
   style  >  
   body  >  
   div   class  ="d1"  > div1   div  > 
   div   class  ="d2"  > div2有float   div  > 
   div   class  ="d3"  > div3   div  > 
   span   class  ="s1"  > span1   span  > 
   span   class  ="s2"  > span2   span  > 
   span   class  ="s3"  > span3有float   span  > 
   div   class  ="d4"  > div4有float   div  > 
   span   class  ="s4"  > span4    span  > 
   body  >   

查看更多关于浅谈float浮动的详细内容...