整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
么是 CSS Float（浮動）？
CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。
Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。
元素怎樣浮動
元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。
一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動元素之后的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
如果圖像是右浮動，下面的文本流將環(huán)繞在它左邊：
實例
img
{
float:right;
}
彼此相鄰的浮動元素
如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。
在這里，我們對圖片廊使用 float 屬性：
實例
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
清除浮動 - 使用 clear
元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。
clear 屬性指定元素兩側(cè)不能出現(xiàn)浮動元素。
使用 clear 屬性往文本中添加圖片廊：
實例
.text_line
{
clear:both;
}
嘗試一下 ?
更多實例
為圖像添加邊框和邊距并浮動到段落的左側(cè)
讓我們?yōu)閳D像添加邊框和邊距并浮動到段落的左側(cè)
標題和圖片向右側(cè)浮動
讓標題和圖片向右側(cè)浮動。
讓段落的第一個字母浮動到左側(cè)
改變樣式，讓段落的第一個字母浮動到左側(cè)。
創(chuàng)建一個沒有表格的網(wǎng)頁
使用 float 創(chuàng)建一個網(wǎng)頁頁眉、頁腳、左邊的內(nèi)容和主要內(nèi)容。
CSS 中所有的浮動屬性
"CSS" 列中的數(shù)字表示不同的 CSS 版本（CSS1 或 CSS2）定義了該屬性。
| 屬性 | 描述 | 值 | CSS |
|---|---|---|---|
| clear | 指定不允許元素周圍有浮動元素。 | leftrightbothnoneinherit | 1 |
| float | 指定一個盒子（元素）是否可以浮動。 | leftrightnoneinherit | 1 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
頁面布局中，有兩個非常常用的CSS屬性。它們巧妙的控制著塊級元素們之間的位置，靈活的讓塊級元素在一行內(nèi)顯示或者另起一行。說到這里，相信大家已經(jīng)猜出來了，這兩個屬性就是控制塊級元素浮動的屬性。整個頁面布局過程中，浮動屬性的使用頻率是最高的。今天，小海老師就來帶領(lǐng)大家一同認識這兩個神奇的CSS屬性。
承接文章：發(fā)揮個人的優(yōu)勢，踏踏實實的學(xué)習(xí)前端開發(fā)，小海為你傳授學(xué)習(xí)心得
技術(shù)等級：初級 | 適合前端開發(fā)的初學(xué)者閱讀學(xué)習(xí)。
希望收藏了這篇文章的你同時也可以關(guān)注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認真閱讀，你一定會學(xué)到對你有用的知識。
一、浮動屬性：
CSS技術(shù)使用float屬性來實現(xiàn)塊級元素的浮動效果。
CSS技術(shù)使用float屬性實現(xiàn)浮動效果
該屬性可以有下列取值：
left，控制塊級元素左浮動。
right，控制塊級元素右浮動。
屬性說明：我們都知道，塊級元素之間默認情況下是獨占一行的。也就是說，兩個在代碼中緊密相連的塊級元素，它們的擺放位置是一個在上一行，另一個在下一行。盡管通過width和height屬性為塊級元素設(shè)置了大小，使得塊級元素?zé)o法占滿整個行，但是塊級元素右側(cè)空余的位置仍然不允許出現(xiàn)任何內(nèi)容。
讓我們一同來看下列實例：
HTML代碼如下所示：
<div id=”box01”></box>
<div id=”box02”></box>
CSS代碼如下所示：
#box01,#box02{
width:200px; height:100px;
}
#box01{background-color:#ff5857;}
#box02{background-color:#5857ff;}
上述代碼的運行結(jié)果如下圖所示，這張圖為我們展示了兩個塊級元素默認的位置擺放。
展示兩個塊級元素的默認位置
如果我想讓兩個塊級元素在一行內(nèi)顯示該如何實現(xiàn)呢？這就需要float屬性登場了。
將#box01的CSS代碼中添加如下屬性：float:left，會發(fā)生什么情況呢？同學(xué)們實踐操作一下，我們會發(fā)現(xiàn)，屏幕中就只剩下紅色的塊級元素了。那藍色的#box02去哪里了呢？其實#box02響應(yīng)了#box01浮動的號召，和#box01一同出現(xiàn)在同一行了，只是被壓在了紅色的#box01的下面。
解決方法就是讓藍色的#box02也添加上 float:left的屬性。這樣，兩個塊級元素就可以共同出現(xiàn)在一行了。下圖為我們展示了這樣的效果。
展示兩個塊級元素的左浮動位置
下面讓我們再看一個實例，這個實例中我們?yōu)閮蓚€塊級元素添加一個容器。
HTML代碼如下所示：
<div id=”box”>
<div class=”boxLeft”></div>
<div class=”boxRight></div>
</div>
我們設(shè)置容器#box的寬度為400px。內(nèi)部的兩個塊級元素：.boxLeft的寬度設(shè)置為150px；.boxRight的寬度設(shè)置為100px。要求讓這兩個內(nèi)部的塊級元素在一行內(nèi)顯示，并且分布到容器的兩端。
CSS代碼如下所示：
#box{
width:400px; height:100px;
background-color:#cccccc;
}
#box .boxLeft{
width:150px; height:100px;
background-color:#ff5857;
float:left;
}
#box .boxRight{
width:100px; height:100px;
background-color:# 5857 ff;
float:right;
}
我們可以看到，在.boxRight對象上，我們添加了float:right的CSS屬性，讓這個塊級元素發(fā)生了右浮動，則該元素跑到了容器的最右側(cè)。下圖為我們展示了這樣的效果。
展示兩個塊級元素的左右浮動位置
浮動屬性的使用結(jié)論：
若希望多個塊級元素在一行內(nèi)顯示，則這幾個塊級元素都要具備float浮動屬性。
二、清除浮動屬性：
CSS技術(shù)使用clear屬性來實現(xiàn)塊級元素的清除浮動效果。
CSS技術(shù)使用clear屬性設(shè)置清除浮動效果
該屬性可以有下列取值：
left，清除塊級元素的左浮動效果。
right，清除塊級元素的右浮動效果。
both，清除塊級元素的兩端浮動效果。
屬性說明：根據(jù)上面的float屬性的使用，我們可想而知，一個緊跟在具有浮動屬性的塊級元素后面的塊級元素，即使它不想和它前面的塊級元素在一行內(nèi)顯示，也會受到前面塊級元素浮動屬性的影響，被壓在前面塊級元素的下方。
解決這個問題，可以對不希望和前面塊級元素在同一行顯示的塊級元素使用清除浮動屬性。
下面讓我們來看這個實例：
HTML代碼如下所示：
<div id=”box”>
<div class=”boxLeft”></div>
<div class=”boxRight></div>
</div>
CSS代碼如下所示（#box .boxRIght）：
#box .boxRight{
width:100px; height:100px;
background-color:# 5857ff;
clear:left;
}
因為.boxRight具備clear:left屬性，所以即使.boxLeft使用了float:left屬性，它們也仍舊分布在兩行，不會在同一行顯示。就好像沒有過使用任何浮動效果似的。
如果大家希望得到更加全面的關(guān)于HTML和CSS技術(shù)講解的內(nèi)容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發(fā)給你，幫助你在前端開發(fā)的道路上闊步前行。
在頭條上發(fā)表的這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學(xué)者通過我寫的文章，逐步學(xué)到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學(xué)過程中的經(jīng)驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設(shè)計版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
希望收藏了這篇文章的你同時也可以關(guān)注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認真閱讀，你一定會學(xué)到對你有用的知識。
關(guān)注“小海前端”，我會繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學(xué)者跟著學(xué)下去，我們共同將前端開發(fā)的路努力堅持的走下去。
結(jié)合前面所學(xué)的CSS知識，使用今天的浮動屬性，可以做一個簡單的導(dǎo)航欄。那么下一篇文章中，小海老師會帶領(lǐng)大家一同利用最近的所學(xué)，做一個水平放置的導(dǎo)航欄。效果非常酷炫，希望正在學(xué)習(xí)前端開發(fā)的同學(xué)們千萬不要錯過。
、有float屬性的元素會跑
代碼：<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
CSS：div{ width: 50px; height: 50px; }
#box1{background: blue; float: left;}
#box2{ background: red;float: left; }
#box3{background: black;float: left; }
在瀏覽器中的樣式：
從圖中可以看出，div本為塊級標簽，本應(yīng)各自占一行，但是添加浮動屬性之后，都向左浮動，跑到了一排。
二、如果上一行沒有float元素，那么float元素是跑不上去的
代碼：<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
CSS：div{ width: 50px; height: 50px; }
#box1{background: blue;}
#box2{ background: red;float: left; }
#box3{background: black;float: left; }
從圖中可以看出，div1沒有floa屬性，所以div2不能浮動上去；而div2有浮動屬性，所以div3會浮動上來。
三、有float屬性的元素是脫離文檔流的，非浮動元素會忽略掉前面的浮動元素
代碼：<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
CSS：div{ width: 50px; height: 50px; }
#box1{background: blue;float:left;}
#box2{ background: red;float: left; }
#box3{background: black;width:150px;height:100px; }
在瀏覽器中的樣式：
從圖中可以看出，div1和div2浮動在文檔之上，div3忽略了div1和div2，div1和div2沒有影響div3的位置。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
