CSS的float怎么使用

這篇文章主要介紹“CSS的float怎么使用”，在日常操作中，相信很多人在CSS的float怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS的float怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

CSS中float用法

◆float是什么意思？

float是浮動，翻譯成中文也是浮動意思。進入對應CSS手冊中float手冊了解float基本信息。

◆float的作用

通過CSS定義float（浮動）讓div樣式層塊，向左或向右（靠）浮動。

◆float語法：

float:none|left|right

◆參數值：
none:　對象不浮動
left:　對象浮在左邊
right:　對象浮在右邊

接下來我們來通過一個DIV+CSS實例講解float使用技巧。

實例一

CSS樣式實例內容，我們讓文字和圖片在一個固定寬度div層內，讓藍色背景文字內容居右，小圖片居左。

1、首先我們設置一個最外層的寬度為300px，高度為200px的CSS命名為box的CSS選擇器代碼如下（知識點px是什么意思）

.box{width:300px;height:200px;}

2、設置box內的文字內容部分CSS樣式命名為yangshi，并設置背景為藍色，寬度為120px，居右浮動

.yangshi{width:120px;float:right;background:#0066FF;}

3、設置圖片居左浮動DIV+CSS樣式

img{float:left;}

4、body內的div布局，代碼如下

<divclassdivclass="box"> <divclassdivclass="yangshi">我是www.divCSS5.com網站，測試內容div> <imgsrcimgsrc="demo.gif"/> div>

說明：這里img標簽是鏈接外部圖片，圖片名為demo.gif

實例二

接下來我們演示使用DIV+CSS讓這里小圖片居右（上個例子是居左），藍色背景文字內容區居左（上個例子是居右）(擴展CSS居中)。這里我們只需要改變yangshi的float:right;為float:left和圖片CSS樣式img{float:left;}為img{float:right;}

CSS代碼如下：

.box{width:300px;height:200px;}  .yangshi{width:120px;float:right;background:#0066FF;}  img{float:left;}

html中的CSS代碼和內容不變

到此，關于“CSS的float怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！