這篇文章將為大家詳細講解有關(guān)css中浮動屬性float有什么用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都網(wǎng)站設計、網(wǎng)站建設,成都做網(wǎng)站公司-創(chuàng)新互聯(lián)已向成百上千家企業(yè)提供了,網(wǎng)站設計,網(wǎng)站制作,網(wǎng)絡營銷等服務!設計與技術(shù)結(jié)合,多年網(wǎng)站推廣經(jīng)驗,合理的價格為您打造企業(yè)品質(zhì)網(wǎng)站。

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

案例分享：

在上述圖片中，我們定義了2個div模塊，一個是大的模塊，一個是小的模塊，為了我們便于觀察，我們在每一個模塊都加上了顏色，便于區(qū)分，并且讓網(wǎng)頁的背景顏色都添加了顏色，同時對每一個div設置有一定的外邊距。

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

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

代碼如下：

#son1
{
    /*這里設置son1的浮動方式*/
    float:left;
}

以上代碼分析：

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

2.設置第二個盒子浮動

#son2
{
    /*這里設置son2的浮動方式*/
    float:left;
}

在以上代碼中，由于第二個盒子變成浮動元素，并且和第一個盒子相鄰，寬度也是不會延伸。如圖所示：

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

關(guān)于css中浮動屬性float有什么用就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網(wǎng)頁標題：css中浮動屬性float有什么用
網(wǎng)站鏈接：http://chinadenli.net/article36/gosjpg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設、品牌網(wǎng)站建設、標簽優(yōu)化、網(wǎng)站營銷、定制網(wǎng)站、網(wǎng)站設計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)