浮動元素引起的問題和解決辦法？

choubou發表於2021-09-09

浮動元素引起的問題：
（1）父元素的高度無法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素（內聯元素）會跟隨其後
（3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構
解決方法：
使用CSS中的clear:both;屬性來清除元素的浮動可解決2、3問題，對於問題1，新增如下樣式，給父元素新增clearfix樣式：
    .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
   .clearfix{display: inline-block;}

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/4548/viewspace-2816969/，如需轉載，請註明出處，否則將追究法律責任。

相關文章