二、clear:both清除浮動
爲了統同樣式,咱們新建一個樣式選擇器CSS命名爲「.clear」,而且對應選擇器樣式爲「clear:both」,而後咱們在父級「</div>」結束前加此div引入「class="clear"」樣式。這樣便可清除浮動。css
具體CSS代碼:html
Html代碼:瀏覽器
clear清除浮動截圖spa
clear清除浮動截圖 使用CSS clear清除浮動xml
這個css clear清除float產生浮動,能夠不用對父級設置高度 也無需技術父級高度,方便適用,但會多加CSS和HTML標籤。htm
三、父級div定義 overflow:hidden
對父級CSS選擇器加overflow:hidden樣式,能夠清除父級內使用float產生浮動。優勢是能夠不多CSS代碼便可解決浮動產生。對象
overflow:hidden解決CSS代碼:blog
HTML代碼不變。get
解決清除浮動後截圖class
overflow清除float產生浮動截圖 overflow:hidden清除浮動截圖
爲何加入overflow:hidden便可清除浮動呢?那是由於overflow:hidden屬性至關因而讓父級緊貼內容,這樣便可緊貼其對象內內容(包括使用float的div盒子),從而實現了清除浮動。Css overflow:hidden清除浮動方法DIVCSS5推薦使用。
以上三點便是兼容各大瀏覽器清除浮動的方法,其它有的瀏覽器不兼容有的不兼容的方法就不必介紹了,你們記住以上三點解決float浮動清除浮動方法。但這裏推薦第三點和第二點解決清除浮動方法。