在頁面布局中，有兩個非常常用的CSS屬性。它們巧妙的控制着塊級元素們之間的位置，靈活的讓塊級元素在一行內顯示或者另起一行。說到這里，相信大家已經猜出來了，這兩個屬性就是控制塊級元素浮動的屬性。整個頁面布局過程中，浮動屬性的使用頻率是最高的。今天，就來帶領大家一同認識這兩個神奇的CSS屬性。
承接文章：發揮個人的優勢，踏踏實實的學習前端開發，為你傳授學習心得
技術等級：初級 | 適合前端開發的初學者閱讀學習。
一、浮動屬性：
CSS技術使用float屬性來實現塊級元素的浮動效果。
web前端/html5學習群：733581373
CSS技術使用float屬性實現浮動效果
該屬性可以有下列取值：
-
left，控制塊級元素左浮動。
-
right，控制塊級元素右浮動。
屬性說明：我們都知道，塊級元素之間默認情況下是獨占一行的。也就是說，兩個在代碼中緊密相連的塊級元素，它們的擺放位置是一個在上一行，另一個在下一行。盡管通過width和height屬性為塊級元素設置了大小，使得塊級元素無法占滿整個行，但是塊級元素右側空余的位置仍然不允許出現任何內容。
讓我們一同來看下列實例：
HTML代碼如下所示：
<div id=”box01”></box>
<div id=”box02”></box>
CSS代碼如下所示：
#box01,#box02{
width:200px; height:100px;
}
#box01{background-color:#ff5857;}
#box02{background-color:#5857ff;}
上述代碼的運行結果如下圖所示，這張圖為我們展示了兩個塊級元素默認的位置擺放。
展示兩個塊級元素的默認位置
如果我想讓兩個塊級元素在一行內顯示該如何實現呢？這就需要float屬性登場了。
將#box01的CSS代碼中添加如下屬性：float:left，會發生什么情況呢？同學們實踐操作一下，我們會發現，屏幕中就只剩下紅色的塊級元素了。那藍色的#box02去哪里了呢？其實#box02響應了#box01浮動的號召，和#box01一同出現在同一行了，只是被壓在了紅色的#box01的下面。
解決方法就是讓藍色的#box02也添加上 float:left的屬性。這樣，兩個塊級元素就可以共同出現在一行了。下圖為我們展示了這樣的效果。
web前端/html5學習群：733581373
展示兩個塊級元素的左浮動位置
下面讓我們再看一個實例，這個實例中我們為兩個塊級元素添加一個容器。
HTML代碼如下所示：
<div id=”box”>
<div class=”boxLeft”></div>
<div class=”boxRight></div>
</div>
我們設置容器#box的寬度為400px。內部的兩個塊級元素：.boxLeft的寬度設置為150px；.boxRight的寬度設置為100px。要求讓這兩個內部的塊級元素在一行內顯示，並且分布到容器的兩端。
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屬性，讓這個塊級元素發生了右浮動，則該元素跑到了容器的最右側。下圖為我們展示了這樣的效果。
展示兩個塊級元素的左右浮動位置
浮動屬性的使用結論：
若希望多個塊級元素在一行內顯示，則這幾個塊級元素都要具備float浮動屬性。
二、清除浮動屬性：
CSS技術使用clear屬性來實現塊級元素的清除浮動效果。
web前端/html5學習群：733581373
CSS技術使用clear屬性設置清除浮動效果
該屬性可以有下列取值：
-
left，清除塊級元素的左浮動效果。
-
right，清除塊級元素的右浮動效果。
-
both，清除塊級元素的兩端浮動效果。
屬性說明：根據上面的float屬性的使用，我們可想而知，一個緊跟在具有浮動屬性的塊級元素后面的塊級元素，即使它不想和它前面的塊級元素在一行內顯示，也會受到前面塊級元素浮動屬性的影響，被壓在前面塊級元素的下方。
解決這個問題，可以對不希望和前面塊級元素在同一行顯示的塊級元素使用清除浮動屬性。
下面讓我們來看這個實例：
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屬性，它們也仍舊分布在兩行，不會在同一行顯示。就好像沒有過使用任何浮動效果似的。
web前端/html5學習群：733581373
歡迎關注此公眾號→【web前端技術圈】跟大佬一起學前端！歡迎大家留言討論一起轉發