CSS的clear:both清除浮動怎么運用

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

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

    1、CSSclear屬性

    屬性值：

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

    both:　不允許有浮動對象

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

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

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

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

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

    3、clear：both的運用實例

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

    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

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

    我們在大盒子的</div>標簽前添加一個空的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;}

關于“CSS的clear:both清除浮動怎么運用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“CSS的clear:both清除浮動怎么運用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。