首頁  >  文章  >  web前端  >  如何清除浮動? html中:after偽元素清除浮動的方法實作 (程式碼)

如何清除浮動? html中:after偽元素清除浮動的方法實作 (程式碼)

不言
不言原創
2018-08-21 14:28:236067瀏覽

本篇文章帶給大家的內容是關於如何清除浮動? 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: &#39;&#39;;
                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>

效果如圖:

如何清除浮動? html中:after偽元素清除浮動的方法實作 (程式碼)

相關建議:

清除浮動1-使用:after 偽元素_html/ css_WEB-ITnose

html清除浮動的6種方法範例_CSS/HTML

以上是如何清除浮動? html中:after偽元素清除浮動的方法實作 (程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn