To float the question: why the following code clearfix can't float

the problem of going to float has been checked on the Internet for a long time. I feel so confused. Why the following code clearfix can"t float? do you have a boss to explain

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lianxi</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .clearfix :after {
            content: "";
            display: table;
            clear: both

        }
/*        .clearfix:after { 
            content:"\200B"; 
            display:block; 
            height:0; 
            clear:both; 
        } 
        .clearfix{*zoom:1;}/*IE/7/6*/*/
        .div1{
            width: 50px;
            height: 50px;
            background: red;
            float: left;
        }
        .div2{
            width: 200px;
            height: 50px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="clearfix">
        <div class="div1">16</div>
        <!-- <p style="clear: both;"> -->
        <div class="div2">20</div>
    </div>
    
</body>
<script>

</script>
</html>