css float 浮動屬性

來源:互聯網
上載者:User

標籤:head   3.2   填充   預設   區塊層級元素   邊框   技術   換行   char   

一、相關概念介紹

  1、文檔流

        HTML頁面的標準文檔流(預設布局)是:從上到下,從左至右,遇塊(區塊層級元素)換行。

  2、浮動層

     給元素的float屬性賦值後,就是脫離文檔流,進行左右浮動,緊貼著父元素(預設為body文本地區)的左右邊框。

    注意事項:

        ① 浮動元素在文檔流空出的位置是由續的(非浮動)元素填充上去。

        ② 區塊層級元素直接填充上去,若跟浮動元素的範圍發生重疊,浮動元素覆蓋區塊層級元素

二、原始碼實現方式  

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>float屬性</title>    <style type="text/css">        #a        {            background-color: #008eb7;            height:30px;            width:100px;        }        #b        {            background-color: #ff8ff5;            height:30px;            width:200px;        }        #c        {            background-color: #33fff2;            height:30px;            width:300px;         }         #d         {            background-color: #33bb00;            height:20px;            width:170px;         }    </style></head><body><div id="a" >div-a</div><div id="b">div-b</div><div id="c">div-c</div><input type="text" value="input1"  /><input type="text" value="input2" /><input type="text" value="input3 " /><div id="d">div-d</div><input type="text" value="input4 " /></body></html>

三、float實現的具體過程

  注意事項:視圖呈現效果與瀏覽器的寬度有關。

  1、float : left

   1.1 針對區塊層級元素的實現過程

    ① 代碼變更

      div-a 添加:float:left

      div-b 添加:float:left

      div-c 添加:float:left

    ② 瀏覽器的寬度逐漸增大的視圖效果

 

        

 

 

   1.2 針對內嵌元素與區塊層級元素混合的實現過程

    ① 代碼變更

      div-b 添加:float:left

      input2 添加:float:left

      div-d 添加:float:left

    ② 瀏覽器的寬度逐漸增大的視圖效果

 

  

  

 

  2、float : right 

    2.1  float : right與float : left實現過程一致

    2.2  注意事項:

    ① 相鄰的浮動元素,right屬性最前面的元素,排在最右面。

    ② 成為浮動元素後,在浮動層擁有內嵌元素的"特性",當多個浮動元素一排容不下時,就換行。

 

   3、height高度不等的元素

    3.1 內嵌元素與區塊層級元素混合

      改變div-d的高度後前後對比圖

    

    

    3.2 區塊層級元素

     

      

      

           

 

   4、結論

    ①  height不相等的div浮動元素排序時,照樣擁有內嵌元素的"特性",當多個浮動元素一排容不下時,就換行。

    ②  成為浮動元素後,在浮動層擁有內嵌元素的"特性",當多個浮動元素一排容不下時,就換行。

 

 

     

 

 

  

css float 浮動屬性

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.