本篇文章帶給大家的內容是關於如何清除浮動? html中:after偽元素清除浮動的方法實作 (程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
:after偽元素和:before偽元素分別用於在元素之後和之前添加內容,實際網頁開發過程中:after偽元素比較常用,借助:after偽元素一般用於清除浮動,利用偽元素來清除浮動是常規浮動清除的三種方式之一,也是最常用、最推薦的一種方式。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>:after清除浮动</title> <style> .out { width:200px; border: 5px solid red; } .out:after{ content: ''; display: block; width: 0px; height: 0px; clear: left; } .in { width: 100px; height: 100px; float:left; } </style> </head> <body> <div class="out"> <div class="in" style="background-color: blue;"></div> <div class="in" style="background-color: green;"></div> </div> </body> </html>
效果如圖:
相關建議:
清除浮動1-使用:after 偽元素_html/ css_WEB-ITnose
以上是如何清除浮動? html中:after偽元素清除浮動的方法實作 (程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!