巧用 clear和after实现页面布局

<style type="text/css">
    .ContainerNew {
        width: 600px;
        background-color: blueviolet;
    }
        .ContainerNew::after {
            content: "";
            clear: both; /** 重点 **/
            background-color: chartreuse;
            display:block; /** 伪元素默认是 内联的，所以要改成 block 重点 **/
        }
    .ContainerItemNew {
        float: left;
        margin: 5px;
        width: 100px;
        aspect-ratio: 1 / 1;
        background-color: #ffd800;
    }
</style>
<div class="ContainerNew">
    <div class="ContainerItemNew">1</div>
    <div class="ContainerItemNew">2</div>
    <div class="ContainerItemNew">3</div>
    <div class="ContainerItemNew">4</div>
    <div class="ContainerItemNew">5</div>
    <div class="ContainerItemNew">6</div>
    <div class="ContainerItemNew">7</div>
    <div class="ContainerItemNew">8</div>
    <div class="ContainerItemNew">9</div>
    <div class="ContainerItemNew">10</div>
    <div class="ContainerItemNew">11</div>
</div>