標籤：辛星 css 浮動 清除 html
上面一篇博文，我們講解了如何使用CSS中的浮動，這一篇我們來講解一下如何清除CSS中的浮動，其實CSS中的浮動的清楚很簡單，只需要使用clear屬性就可以了，至於怎麼用好它，很多人可能一投霧水，我在初學的時候也是經常找不著北，就好像清除浮動是個隨機事件一樣，當然，它不是，它的規律性很強，就讓辛星來給您剖析一下這個規律把。
首先還是上面的HTML檔案，它的內容如下：
<html><head><link rel="stylesheet" type="text/css" href="my.css"></head><div id = "demo1">區塊1</div><div id = "demo2">區塊2</div><div id = "demo3">區塊3</div><div id = "demo4">區塊4</div></html>
然後是下面的CSS檔案，我們還是摘抄一下：
#demo1{background-color: #933;height: 100px;width:300px; }#demo2{background-color: #0F0;height:60px;width:200px;}#demo3{background-color: #F00;height: 140px;width: 250px;}#demo4{background-color: #CCC;height: 80px;width: 180px;} 其實要用clear清除浮動，緊緊抓住定義就可以了：clear的取值可以有四個，分別是none，left，right和both。大家一定要注意一點，那就是它是清除浮動，它清除的誰的浮動，它清除的是前一個的浮動，比如clear:none，這個和沒寫一樣，clear：left表示如果前一個是浮動元素，那麼它不能在該元素的左邊浮動，即如果我的clear屬性是left，我絕對不允許有一個在我左邊浮動的元素，取值為right即我不允許我的前一個在我右邊浮動，取值為both，即我不允許我的前一個元素在我任何一邊浮動。
我們可以讓區塊2右浮動，讓區塊3清除浮動，但是它本身不浮動，區塊4也不浮動，那麼代碼如下：
#demo1{background-color: #933;height: 100px;width:300px; }#demo2{float: right;background-color: #0F0;height:60px;width:200px;}#demo3{clear: both;background-color: #F00;height: 140px;width: 250px;}#demo4{background-color: #CCC;height: 80px;width: 180px;}如下：
那可能有人會問了：星哥，如果區塊三使用clear：left，是不是就會緊挨著區塊1了，答案是這樣的，我們修改CSS代碼如下：
#demo1{background-color: #933;height: 100px;width:300px; }#demo2{float: right;background-color: #0F0;height:60px;width:200px;}#demo3{clear: left;background-color: #F00;height: 140px;width: 250px;}#demo4{background-color: #CCC;height: 80px;width: 180px;}
結果圖如下：
上面我們的區塊3並沒有使用浮動，大家理解起來會非常容易，那麼如果區塊三使用了右浮動呢？看下面代碼：
#demo1{background-color: #933;height: 100px;width:300px; }#demo2{float: right;background-color: #0F0;height:60px;width:200px;}#demo3{clear: both;float: right;background-color: #F00;height: 140px;width: 250px;}#demo4{background-color: #CCC;height: 80px;width: 180px;}下面是效果講解：
那麼此時大家可能會想，如果我的區塊四清除了右浮動又該如何呢?
此時css代碼變成：
#demo1{background-color: #933;height: 100px;width:300px; }#demo2{float: right;background-color: #0F0;height:60px;width:200px;}#demo3{clear: both;float: right;background-color: #F00;height: 140px;width: 250px;}#demo4{clear: both;background-color: #CCC;height: 80px;width: 180px;}此時的效果如下：
到這裡，我要講的就全部講完了，當我還是個小菜鳥的時候，也是一頭霧水，聽得迷迷糊糊，但是，我看了N多人的部落格，聽了N多人的解釋，終於明白了。當然，我敢肯定，我看的那些部落格裡有錯誤的講解，但是本文在正確性上絕對可以放心的。。。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
