CSS清除浮動_清除float浮動

二、clear:both清除浮動
爲了統同樣式，咱們新建一個樣式選擇器CSS命名爲「.clear」，而且對應選擇器樣式爲「clear:both」，而後咱們在父級「</div>」結束前加此div引入「class="clear"」樣式。這樣便可清除浮動。

具體CSS代碼：

.divcss5{ width:400px;border:1px solid #F00;background:#FF0}
.divcss5-left,.divcss5-right{width:180px;height:100px;
border:1px solid #00F;background:#FFF}
.divcss5-left{ float:left}
.divcss5-right{ float:right}
.clear{ clear:both}

Html代碼：

<div class="divcss5">
    <div class="divcss5-left">left浮動</div>
    <div class="divcss5-right">right浮動</div>
    <div class="clear"></div>
</div>

clear清除浮動截圖

clear清除浮動截圖 使用CSS clear清除浮動

這個css clear清除float產生浮動，能夠不用對父級設置高度 也無需技術父級高度，方便適用，但會多加CSS和HTML標籤。

三、父級div定義 overflow:hidden
對父級CSS選擇器加overflow:hidden樣式，能夠清除父級內使用float產生浮動。優勢是能夠不多CSS代碼便可解決浮動產生。

overflow:hidden解決CSS代碼：

.divcss5{ width:400px;border:1px solid #F00;background:#FF0; overflow:hidden}
.divcss5-left,.divcss5-right{width:180px;height:100px;border:1px solid #00F;background:#FFF}
.divcss5-left{ float:left}
.divcss5-right{ float:right}

HTML代碼不變。

解決清除浮動後截圖

overflow清除float產生浮動截圖 overflow:hidden清除浮動截圖

爲何加入overflow:hidden便可清除浮動呢？那是由於overflow:hidden屬性至關因而讓父級緊貼內容，這樣便可緊貼其對象內內容（包括使用float的div盒子），從而實現了清除浮動。Css overflow:hidden清除浮動方法DIVCSS5推薦使用。

以上三點便是兼容各大瀏覽器清除浮動的方法，其它有的瀏覽器不兼容有的不兼容的方法就不必介紹了，你們記住以上三點解決float浮動清除浮動方法。但這裏推薦第三點和第二點解決清除浮動方法。