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

在上述文章中，我們對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樣式中，對兩個盒子都是設置了外邊框，如果盒子一為浮動對象，那麼盒子2就不會浮動元素，如果兩個盒子同時為浮動元素，中間就會有一定的間距，這是和浮動元素決定的。

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

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