CSS清除浮動有幾種方法?
問題描述
CSS清除浮動有幾種方法?
問題解答
回答1:CSS清除浮動有幾種方法?-PHP中文網問答-CSS清除浮動有幾種方法?-PHP中文網問答
圍觀一下哦,學習一下。
回答2:方法一:使用帶clear屬性的空元素
在浮動元素后使用一個空元素如<p class="clear"></p>,并在CSS中賦予.clear{clear:both;}屬性即可清理浮動。亦可使用<br class="clear" />或<hr class="clear" />來進行清理。
優點:簡單,代碼少,瀏覽器兼容性好。缺點:需要添加大量無語義的html元素,代碼不夠優雅,后期不容易維護。
方法二:使用CSS的overflow屬性
給浮動元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動,另外在 IE6 中還需要觸發 hasLayout ,例如為父元素設置容器寬高或設置 zoom:1。在添加overflow屬性后,浮動元素又回到了容器層,把容器高度撐起,達到了清理浮動的效果。
方法三:給浮動的元素的容器添加浮動
給浮動元素的容器也添加上浮動屬性即可清除內部浮動,但是這樣會使其整體浮動,影響布局,不推薦使用。
方法四:使用鄰接元素處理
什么都不做,給浮動元素后面的元素添加clear屬性。
方法五:使用CSS的:after偽元素
結合 :after 偽元素(注意這不是偽類,而是偽元素,代表一個元素之后最近的元素)和 IEhack ,可以完美兼容當前主流的各大瀏覽器,這里的 IEhack 指的是觸發 hasLayout。給浮動元素的容器添加一個clearfix的class,然后給這個class添加一個:after偽元素實現元素末尾添加一個看不見的塊元素(Block element)清理浮動。
相關文章:
1. 如何解決docker宿主機無法訪問容器中的服務?2. javascript - 如何使用nodejs 將.html 文件轉化成canvas3. angular.js - 輸入郵箱地址之后, 如何使其自動在末尾添加分號?4. javascript - html5的data屬性怎么指定一個function函數呢?5. 在mac下出現了兩個docker環境6. python - Scrapy存在內存泄漏的問題。7. java如何生成token?8. docker-compose中volumes的問題9. javascript - 后臺管理系統左側折疊導航欄數據較多,怎么樣直接通過搜索去定位到具體某一個菜單項位置,并展開當前菜單10. javascript - Web微信聊天輸入框解決方案
