今天這篇文章我們來(lái)說(shuō)一下css的浮動(dòng)屬性（float），給塊狀元素增加float屬性可以使其轉(zhuǎn)變?yōu)樾袃?nèi)元素，也就是我們所說(shuō)標(biāo)簽對(duì)象浮動(dòng)居左靠左（float:left）和浮動(dòng)居右靠右(float:right)。
（1）float使用語(yǔ)法
css的float主要有3個(gè)屬性值none、left、right，默認(rèn)為none；具體的使用如下所示：
float:none; （不使用浮動(dòng)）
float:left; （靠左浮動(dòng)）
float:right; （靠右浮動(dòng)）
（2）float使用案例
我們通過(guò)案例來(lái)實(shí)際演練一下float元素的使用技巧。
1、float:left的使用練習(xí)
我們這里創(chuàng)立一個(gè)導(dǎo)航條做網(wǎng)頁(yè)用浮動(dòng)還是定位，導(dǎo)航條包含首頁(yè)、關(guān)于我們、新聞中心、案例展現(xiàn)等欄目名稱。具體的網(wǎng)頁(yè)代碼以及顯示效果就如下圖所示：
由上圖可以看出默認(rèn)的樣式是豎排顯示的，但是我們常見(jiàn)的網(wǎng)頁(yè)導(dǎo)航條都是橫排顯示的，這時(shí)候我們即可以使用float屬性來(lái)使塊狀元素轉(zhuǎn)變?yōu)樾袃?nèi)元素，并讓居左顯示。
這里我們創(chuàng)立一個(gè)寬度為980px的導(dǎo)航條，給子元素（li）增加float的屬性并對(duì)齊進(jìn)行填充（）以及外間距（）的潤(rùn)色。具體的網(wǎng)頁(yè)代碼以及顯示效果就如下圖所示：
網(wǎng)頁(yè)中的顯示效果：
2、float:right的使用練習(xí)
float:right顧名思義用于元素靠右對(duì)齊，我們來(lái)看下面的一個(gè)例子，我們隨便寫一篇文字，而后文字中插入一張圖片并使圖片右對(duì)齊。
我們?cè)倬W(wǎng)頁(yè)中可以看到圖片已經(jīng)浮動(dòng)到網(wǎng)頁(yè)的右側(cè)中去了。
好了，本篇文章就給大家說(shuō)到這里，大家可以注意看下我們使用float之后會(huì)出現(xiàn)什么問(wèn)題，下邊文章我們會(huì)給大家講解如何清理float帶來(lái)的負(fù)面影響。
每日金句：你不能拼爹的時(shí)候，你就只能去拼命！喜歡我的文章的小伙伴記得關(guān)注一下哦做網(wǎng)頁(yè)用浮動(dòng)還是定位，每天將為你升級(jí)最新知識(shí)。