首頁  >  文章  >  web前端  >  經驗分享:css浮動屬性float詳解

經驗分享:css浮動屬性float詳解

云罗郡主
云罗郡主原創
2018-11-03 14:23:194487瀏覽

在上述文章中,我們對float基本屬性有了詳細的理解,下面我們來講述float怎麼用,最經典的案例分享。 【推薦閱讀:前端float怎麼用? float屬性詳解

在csss樣式中,浮動float是最好的屬性,我們可以透過不同的浮動屬性來去定位div元素,來達到想要的效果,float屬性就是控制盒子以及盒子中的內容向右向左浮動,在css中,任何的元素都是可以進行浮動的。

案例分享:

   在上述圖片中,我們定義了2個div模組,一個是大的模組,一個是小的模組,為了我們方便觀察,我們在每個模組都加上了顏色,便於區分,並且讓網頁的背景顏色都添加了顏色,同時對每個div設定有一定的外邊距。

如果在兩個模組都設定了浮動,由於div時候塊級元素,每一個元素的都是相互獨立的,每一個盒子都是自由的,並且從上到下,自由排列。

1.我們設定第一個div浮動

程式碼如下:

#son1
{
    /*这里设置son1的浮动方式*/
    float:left;
}

以上程式碼分析:

由於一個盒子我們設定是向左浮動,第一個盒子也是浮動元素,因此第一個盒子的寬度是不在延伸,寬度也是最小寬度,而且第二個盒子也是緊跟著第一個盒子。

2.設定第二個盒子浮動

#son2
{
    /*这里设置son2的浮动方式*/
    float:left;
}

在上述程式碼中,由於第二個盒子變成浮動元素,並且和第一個盒子相鄰,寬度也是不會延伸。如圖:

經驗分享:css浮動屬性float詳解

然而很多人都會奇怪,為什麼第一個盒子和第二個盒子中間會有一定的距離呢,其實我們在css樣式中,對兩個盒子都是設置了外邊框,如果盒子一為浮動對象,那麼盒子2就不會浮動元素,如果兩個盒子同時為浮動元素,中間就會有一定的間距,這是和浮動元素決定的。

以上就是對經驗分享:css浮動屬性float詳解全部介紹,如果你想了解更多有關Html5教程,請關注php中文網。


以上是經驗分享:css浮動屬性float詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn