CSS3中浮動的處理 -float

一、浮動

1.用法

 float:right、left、none、inherit         --左浮動、右浮動、不浮動、繼承父元素浮動

2.特性:

  使元素脫離標準流、文本自環繞、行內元素浮動後能夠進行寬、高、邊距等設置

3.副作用:元素塌陷

4.解決元素塌陷的方法

  1)父元素和子元素一起浮動   --在父元素中也增加相應的浮動

  2)給父元素設置寬高             --不會塌陷

  3)溢出解決                        

    .float{

     overflow:hidden;                          /*auto也可以,auto將溢出部門滾動,hidden則是直接將溢出部分截取*/

     zoom:1;                                      /*IE專屬*/

}

   4)清除浮動

   在浮動子元素的下面加個盒子  <div class=".clear"></div>

      .clear{

    clear:both;                  /*指定不允許元素周圍有浮動元素 left、right、both、none、inherit*/  

    }

5)僞類處理

     .floatElement ::after{

     clear:both;

     display:block;

    visibility:hidden;

    height:0;

  }

   

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章