伪元素清除浮动_伪元素解决浮动溢出-CSDN博客

本文链接：https://blog.csdn.net/SKY_Lake/article/details/81055566

:after 伪元素清除浮动

适用情况：容器高度为auto ，且内容中有浮动时，浮动会溢出

/*用于清除浮动的伪元素样式*/
.clearfix:after{
        content: ""; 
        display: block; 
        height: 0; 
        clear: both; 
        visibility: hidden;  
}

样例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    .total {
        width: 100%;
        height: auto;
        background: #ccc;
    }
    .red {
        width: 100px;
        height: 300px;
        background: #F00;
        float: left;    /*加上float浮动，红色块就会溢出，需要添加:after伪元素清除浮动*/
    }
    .blue {
        width: 200px;
        height: 400px;
        background: #00F;
    }
    .clearfix:after{    /*清除浮动的伪元素*/
        content: "";
        display: block;
        height: 0;
        clear: both;
        overflow: hidden;
        visibility: hidden;
    }
    </style>
</head>

<body>
    <div class="total clearfix">
        <p>文字撑开高度文字撑开高度文字撑开高度文字撑开高度文字撑开高度文字撑开高度文字撑开高度文字撑开高度文字撑开高度文字撑开高度文字撑开高度文字撑开高度文字撑开高度文字撑开高度文字撑开高度文字撑开高度文字撑开高度文字撑开高度文字撑开高度文字撑开高度文字撑开高度</p>
        <div class="red"></div>
    </div>
    <div class="blue"></div>
</body>

</html>