清除浮动-：after伪元素法（HTML、CSS）

小灰灰 2023-10-03 13:06 24阅读 0赞

### 清除浮动-：after伪元素法（HTML、CSS） ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>清除浮动-：after伪元素法</title>
        <style>
            .clearfix:after {
        
                content: "";
                display: block;
                /*  因为上面那个默认为行内元素 所以必须转换为块级元素 */
                height: 0;
                clear: both;
                visibility: hidden;
            }
    
            .clearfix:after {
        
                /*     IE6、7专有   特定写法 */
                *zoom: 1;
            }
    
            .box {
        
                width: 800px;
                border: 1px solid blue;
                margin: 0 auto;
            }
    
            .damao {
        
                float: left;
                width: 300px;
                height: 200px;
                background-color: purple;
            }
    
            .ermao {
        
                float: left;
                width: 200px;
                height: 200px;
                background-color: pink;
            }
    
            .footer {
        
                height: 200px;
                background-color: black;
            }
        </style>
    </head>
    
    <body>
        <div class="box clearfix">
            
            <div class="damao">大毛</div>
            <div class="ermao">二毛</div>
        </div>
        <div class="footer"></div>
    
    </body>
    
    </html>