Six ways to clear floats in CSS

html

    <p>
        <p class=&#39;box-left&#39;></p>
        <p class=&#39;box-right&#39;></p>
    </p>

css

    .box-left,.box-right{
        width:200px;
        height:200px;        float: left;
        background: red;
        border:1px solid #333;
    }

The first method: .box{clear:box}

th The second method: .box{overflow:hidden}

The third method: .box{overflow:auto}

The fourth method: .box:after{ content:""; height:0; visibility:hidden; display:block; clear:both;}.box{ zoom:1 ;}

The fifth method: .box{height:200px} sets the height

The sixth method: .box{display:table}

Any other methods are welcome to add, come on, let’s make progress together

The above is the detailed content of Six ways to clear floats in CSS. For more information, please follow other related articles on the PHP Chinese website!