css中使用float屬性的方法

這篇文章主要介紹了css中使用float屬性的方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站是專(zhuān)業(yè)的順德網(wǎng)站建設(shè)公司，順德接單;提供成都做網(wǎng)站、網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專(zhuān)業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行順德網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專(zhuān)業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專(zhuān)業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

首先我們來(lái)簡(jiǎn)單看一下css中float屬性

float屬性，顧名思義就是浮動(dòng)屬性，設(shè)置了float屬性的元素會(huì)根據(jù)屬性值向左或向右浮動(dòng)，我們稱(chēng)設(shè)置了float屬性的元素為浮動(dòng)元素。

用上面的話說(shuō)來(lái)，感覺(jué)其實(shí)是比較抽象的，下面我們就來(lái)從css的float屬性的用法來(lái)進(jìn)一步了解float屬性。

我們先來(lái)看一個(gè)float屬性的應(yīng)用例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style>
img 
{
    float:right;/*向右*/
    /*float: left;向左*/
}
</style>
</head>
<body>
<p>
    <img src="image/timg.jpg" width="95" height="84" />
好看的花好看的花好看的花好看的花好看的花好看的花好看的花好看的花好看的花
好看的花好看的花好看的花好看的花好看的花好看的花好看的花好看的花
好看的花好看的花好看的花好看的花好看的花好看的花好看的花好看的花
</p>
</body>
</html>

上述代碼中我們給了圖片一個(gè)float:right屬性，導(dǎo)致了圖片將會(huì)浮動(dòng)在段落的右邊，效果如下：

css中使用float屬性的方法

這就是float屬性所實(shí)現(xiàn)的功能，但是float屬性在實(shí)際應(yīng)用的過(guò)程中影響的不僅是自己，它也會(huì)影響周?chē)脑貙?duì)其進(jìn)行環(huán)繞，所以這時(shí)候就需要來(lái)清除浮動(dòng)帶來(lái)的影響。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享css中使用float屬性的方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

文章名稱(chēng)：css中使用float屬性的方法
瀏覽地址：http://muchs.cn/article12/piphdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、靜態(tài)網(wǎng)站、電子商務(wù)、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、面包屑導(dǎo)航

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

猜你還喜歡下面的內(nèi)容