Several methods to clear floats

This time I will bring you several methods of clearing floats, and what are the precautions for clearing floats. The following is a practical case, let’s take a look.

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;
    }

First method: .box{clear: box}

Second method:.box{overflow:hidden}

Third method:. box{overflow:auto}

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

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

The sixth method: .box{display:table}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

CSS to draw a red heart

##The difference between display and visibility

Several ways to implement Footer bottom placement in CSS

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