css 清除浮动带来的不能自动撑高内容的问题

当没有浮动时：

   <div class="box1 ">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <div class="box1">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>

.box1 {
            width: 1000px;
            border: 10px solid red;
            margin-bottom: 5px;

        }

        .box1 p {
            float: left;
            width: 100px;
            height: 100px;
            margin-right: 10px;
            background-color: skyblue;
        }

效果为：

加了伪类后：

 <div class="box1 clearFix">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <div class="box1 clearFix">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>


 .box1 {
            width: 1000px;
            border: 10px solid red;
            margin-bottom: 5px;

        }

        .box1 p {
            float: left;
            width: 100px;
            height: 100px;
            margin-right: 10px;
            background-color: skyblue;
        }

        .clearFix::after {
            content: "1";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

 还可直接在父类上直接添加overflow:hidden