在網頁制作中,浮動元素是常見的布局方式,它能夠使元素在同一行內并排顯示,優化頁面布局。但是,浮動元素會造成父元素無法自動高度,影響后續元素的布局,這時就需要清除浮動。
在清除浮動時,我們通常使用css樣式來解決。清除浮動的css樣式主要有以下幾種:
.clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; }
上面的css代碼采用了偽元素after和before進行清除,其中clearfix是一個自定義樣式類名稱,前綴.表示為類選擇器。該代碼主要實現了添加一個清除浮動樣式的div,并利用clear:both;清除浮動元素的影響。同時,由于清除浮動后父元素高度會變為0,因此需要使用clearfix樣式來防止margin重疊和浮動間距錯誤的問題。
另外,清除浮動還有許多其他的方法,如使用空div標簽或overflow:hidden樣式等等。清除浮動時應根據實際情況選擇最合適的方法。
上一篇css清除瀏覽器原有屬性
下一篇CSS清除浮動寫法