在上述文章中,我們對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中文網其他相關文章!