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

成都創(chuàng)新互聯(lián)公司公司2013年成立，先為融水等服務(wù)建站，融水等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為融水企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

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

    1、CSSclear屬性

    屬性值：

    none:　允許兩邊都可以有浮動對象

    both:　不允許有浮動對象

    left:　不允許左邊有浮動對象

    right:　不允許右邊有浮動對象

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

    2、clear：both清除浮動的適用場景

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

    3、clear：both的運用實例

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

    HTML部分：

    <divclass="box">

    <divclass="left">左浮動left</div>

    <divclass="right">右浮動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

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

    我們在大盒子的</div>標(biāo)簽前添加一個空的div，（div作為大盒子的最后一個子盒子），并給這個空div添加CSS樣式，clear:both，代碼如下：

    HTML部分：

    <divclass="box">

    <divclass="left">左浮動left</div>

    <divclass="right">右浮動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清除浮動怎么運用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“CSS的clear:both清除浮動怎么運用”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁名稱：CSS的clear:both清除浮動怎么運用
文章起源：http://chinadenli.net/article28/ihjecp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、軟件開發(fā)、網(wǎng)站維護、企業(yè)建站、云服務(wù)器、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)