小編給大家分享一下CSS中clear：both清除浮動的用法，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司，專注成都網(wǎng)站設(shè)計、做網(wǎng)站、網(wǎng)站營銷推廣，空間域名，網(wǎng)頁空間，網(wǎng)站改版維護有關(guān)企業(yè)網(wǎng)站制作方案、改版、費用等問題，請聯(lián)系創(chuàng)新互聯(lián)。
首先，大家應(yīng)該清楚浮動float的一些特點。如果給元素設(shè)置了浮動，這個元素就相當于塊級元素，并且可以對其設(shè)置寬和高；浮動會使其后面的元素脫離標準流；若父元素里的子元素全為浮動元素，父元素高度自適應(yīng)問題。
1、CSS clear屬性
屬性值：
none : 允許兩邊都可以有浮動對象
both : 不允許有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
寫法示范：#box{clear：both/left/right/none}
2、clear：both清除浮動的適用場景
在頁面布局時，使用了浮動以后，導致頁面排版混亂，這時我們通常會用clear:both來清除浮動。舉個常見的例子，一個大盒子里面有兩個小的盒子，大盒子沒有設(shè)置高度，并且對小盒子使用了css float樣式，這時大盒子的背景或邊框不能正常顯示，那么我們就需要使用clear:both來清除浮動，使頁面恢復(fù)正常。
3、clear：both的運用實例
描述：設(shè)置外面大盒子的長度為500px ,不給他高度，讓它自己撐起來，它的邊框（css border）為紅色，背景（css background）為粉色。大盒子里面有兩個小的盒子，一個設(shè)置float:right，另一個設(shè)置float:left，背景顏色都為綠色，寬度為200px,高度為150px。接下來我們觀察一下，看浮動產(chǎn)生了什么效果。代碼如下：
HTML部分：
重慶分公司
重慶分公司
