CSS清除浮動_清除float浮動

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

具體CSS代碼:html

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

Html代碼:瀏覽器

  1. <div class="divcss5"
  2.     <div class="divcss5-left">left浮動</div
  3.     <div class="divcss5-right">right浮動</div
  4.     <div class="clear"></div
  5. </div

clear清除浮動截圖spa

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

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

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

overflow:hidden解決CSS代碼:blog

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

HTML代碼不變。get

解決清除浮動後截圖class

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

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

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

相關文章
相關標籤/搜索