CSS的clear:both清除浮動(dòng)怎么運(yùn)用

這篇文章主要介紹了CSS的clear:both清除浮動(dòng)怎么運(yùn)用的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇CSS的clear:both清除浮動(dòng)怎么運(yùn)用文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

    首先，大家應(yīng)該清楚浮動(dòng)float的一些特點(diǎn)。如果給元素設(shè)置了浮動(dòng)，這個(gè)元素就相當(dāng)于塊級(jí)元素，并且可以對(duì)其設(shè)置寬和高；浮動(dòng)會(huì)使其后面的元素脫離標(biāo)準(zhǔn)流；若父元素里的子元素全為浮動(dòng)元素，父元素高度自適應(yīng)問(wèn)題。

    1、CSSclear屬性

    屬性值：

    none:　允許兩邊都可以有浮動(dòng)對(duì)象

    both:　不允許有浮動(dòng)對(duì)象

    left:　不允許左邊有浮動(dòng)對(duì)象

    right:　不允許右邊有浮動(dòng)對(duì)象

    寫法示范：#box{clear：both/left/right/none}

    2、clear：both清除浮動(dòng)的適用場(chǎng)景

    在頁(yè)面布局時(shí)，使用了浮動(dòng)以后，導(dǎo)致頁(yè)面排版混亂，這時(shí)我們通常會(huì)用clear:both來(lái)清除浮動(dòng)。舉個(gè)常見(jiàn)的例子，一個(gè)大盒子里面有兩個(gè)小的盒子，大盒子沒(méi)有設(shè)置高度，并且對(duì)小盒子使用了cssfloat樣式，這時(shí)大盒子的背景或邊框不能正常顯示，那么我們就需要使用clear:both來(lái)清除浮動(dòng)，使頁(yè)面恢復(fù)正常。

    3、clear：both的運(yùn)用實(shí)例

    描述：設(shè)置外面大盒子的長(zhǎng)度為500px,不給他高度，讓它自己撐起來(lái)，它的邊框（cssborder）為紅色，背景（cssbackground）為粉色。大盒子里面有兩個(gè)小的盒子，一個(gè)設(shè)置float:right，另一個(gè)設(shè)置float:left，背景顏色都為綠色，寬度為200px,高度為150px。接下來(lái)我們觀察一下，看浮動(dòng)產(chǎn)生了什么效果。代碼如下：

    HTML部分：

    <divclass="box">

    <divclass="left">左浮動(dòng)left</div>

    <divclass="right">右浮動(dòng)right</div>

    </div>

    CSS部分：

    .box{width:500px;background:pink;border:1pxsolid#F00;padding:5px;}

    .left,.right{background:#008000;width:200px;height:150px;}

    .left{float:left;}

    .right{float:right;}

    效果圖：

    clear1.jpg

    兩個(gè)小盒子呈現(xiàn)了我們想要的效果，一個(gè)左浮動(dòng)，一個(gè)右浮動(dòng)，但是我們的大盒子沒(méi)有被撐開(kāi)，這種現(xiàn)象就是由于浮動(dòng)引起的。接下里就用clear：both清除浮動(dòng)，看看能不能使大盒子被撐開(kāi)。

    我們?cè)诖蠛凶拥?lt;/div>標(biāo)簽前添加一個(gè)空的div，（div作為大盒子的最后一個(gè)子盒子），并給這個(gè)空div添加CSS樣式，clear:both，代碼如下：

    HTML部分：

    <divclass="box">

    <divclass="left">左浮動(dòng)left</div>

    <divclass="right">右浮動(dòng)right</div>

    <divclass="clear"></div>

    </div>

    CSS部分：

    .box{width:500px;background:pink;border:1pxsolid#F00;padding:5px;}

    .left,.right{background:#008000;width:200px;height:150px;}

    .left{float:left;}

    .right{float:right;}

    .clear{clear:both;}

關(guān)于“CSS的clear:both清除浮動(dòng)怎么運(yùn)用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“CSS的clear:both清除浮動(dòng)怎么運(yùn)用”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。