整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
例
指定段落的左側或右側不允許浮動的元素：
img
{
float:left;
}
p.clear
{
clear:both;
}
屬性定義及使用說明
clear屬性指定段落的左側或右側不允許浮動的元素。
| 默認值： | none |
|---|---|
| 繼承性： | no |
| 版本： | CSS1 |
| JavaScript 語法： | object.style.clear="left" |
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
| 屬性 | |||||
|---|---|---|---|---|---|
| clear | 1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
屬性值
| 值 | 描述 |
|---|---|
| left | 在左側不允許浮動元素。 |
| right | 在右側不允許浮動元素。 |
| both | 在左右兩側均不允許浮動元素。 |
| none | 默認值。允許浮動元素出現在兩側。 |
| inherit | 規定應該從父元素繼承 clear 屬性的值。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
動是我們前端布局的重要屬性，而浮動產生的高度塌陷問題也一直伴隨在我們布局過程中。眾所周知，clear：both是浮動產生高度塌陷的克星，但你真的認識clear么。
在技術文檔中對于clear的值是這樣解說的：
我們在實例中看一下：
首先：在一個大盒子里放4個p標簽，讓p標簽全部左浮動，此時會產生高度塌陷問題
HTML代碼如下：
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
</body>
css代碼如下：
<style>
*{
margin: 0;
padding: 0;
}
.box{
border: 3px solid #f00;
}
.box p{
width: 100px;
background-color: pink;
border: 3px solid #333;
float: left;
}
p:nth-of-type(1){
height: 60px;
background-color: yellow;
}
p:nth-of-type(2){
height: 100px;
background-color: orange;
}
p:nth-of-type(3){
height: 140px;
background-color: green;
}
p:nth-of-type(4){
height: 180px;
background-color: blue;
}
</style>
在前兩個p標簽之后添加一個空的塊元素div，給這個塊元素clear：left屬性
HTML代碼如下：
<body>
<div>
<p>1</p>
<p>2</p>
<div></div>
<p>3</p>
<p>4</p>
</div>
</body>
css代碼如下：
.clear{ clear: left; }
看起來是實現了元素左側不允許有浮動，但如果給第2個p標簽一個右浮動
css代碼如下：
p:nth-of-type(2){
float: right;
height: 100px;
background-color: orange;
}
會發現父元素只撐開了第一個左浮動的p標簽的寬度。
此時，把中間的div元素clear值改成right，我們再來看
css代碼如下：
.clear{ clear: right; }
增加第一個p標簽的高度后
css代碼如下：
p:nth-of-type(1){
height: 200px;
background-color: yellow;
}
按照文檔中說明來看，應該是元素右側不能有浮動元素，但第3個和第4個p標簽一直都是沒有變化的，相反，元素之前的右浮動元素撐開了父元素的高度。
再看看clear值為both，在值為both時修改第一個p元素的高度
css代碼如下：
.clear{ clear: both; }
這種情況下，無論之前的是左浮動還是右浮動都可以清除掉
到這里，我們發現clear是清除掉元素之前的浮動元素
clear：left 清除這個元素之前元素的左浮動
clear：right 清除這個元素之前元素的右浮動
clear：both 清除這個元素之前元素的左浮動和右浮動
最后注意：clear屬性只對塊元素有效哦！！！
頁面布局中，有兩個非常常用的CSS屬性。它們巧妙的控制著塊級元素們之間的位置，靈活的讓塊級元素在一行內顯示或者另起一行。說到這里，相信大家已經猜出來了，這兩個屬性就是控制塊級元素浮動的屬性。整個頁面布局過程中，浮動屬性的使用頻率是最高的。今天，小海老師就來帶領大家一同認識這兩個神奇的CSS屬性。
承接文章：發揮個人的優勢，踏踏實實的學習前端開發，小海為你傳授學習心得
技術等級：初級 | 適合前端開發的初學者閱讀學習。
希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。
一、浮動屬性：
CSS技術使用float屬性來實現塊級元素的浮動效果。
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的屬性。這樣，兩個塊級元素就可以共同出現在一行了。下圖為我們展示了這樣的效果。
展示兩個塊級元素的左浮動位置
下面讓我們再看一個實例，這個實例中我們為兩個塊級元素添加一個容器。
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屬性來實現塊級元素的清除浮動效果。
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屬性，它們也仍舊分布在兩行，不會在同一行顯示。就好像沒有過使用任何浮動效果似的。
如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。
在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
希望收藏了這篇文章的你同時也可以關注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經過系統的歸納和總結的。塌下心來認真閱讀，你一定會學到對你有用的知識。
關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。
結合前面所學的CSS知識，使用今天的浮動屬性，可以做一個簡單的導航欄。那么下一篇文章中，小海老師會帶領大家一同利用最近的所學，做一個水平放置的導航欄。效果非常酷炫，希望正在學習前端開發的同學們千萬不要錯過。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
