Why do you want to remove floats?

The blue div blocks the red DIV because it floats out of the document flow, so we need to remove the float and make the red div block appear below the blue div block

<style>
    .box1{
        width: 200px;
        height: 200px;
        background-color: blue;
        float: left;
    }
    .box2{
        width: 300px;
        height: 100px;
        background-color: red;
    }
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
Copy the code

Now the effect

Objective the results

1. Add height to the floating element’s ancestor

<style>
    .father{
        height: 200px;
    }
    .box1{
        width: 200px;
        height: 200px;
        background-color: blue;
        float: left;
    }
    .box2{
        width: 300px;
        height: 100px;
        background-color: red;
    }
</style>
<body>
    <div class="father">
        <div class="box1"></div>
    </div>
    <div class="box2"></div>
</body>
Copy the code

2. Clear floats with after pseudo-elements (for the parent) (recommended)

    .father::after{
        content: '';
        height: 0;
        visibility: hidden;
        display: block;
        clear: both;
    }
    .box1{
        width: 200px;
        height: 200px;
        background-color: blue;
        float: left;
    }
    .box2{
        width: 300px;
        height: 100px;
        background-color: red;
    }
Copy the code

3. Add overflow property to parent (add overflow:hidden to parent)

    .father{
        overflow: hidden;
    }
    .box1{
        width: 200px;
        height: 200px;
        background-color: blue;
        float: left;
    }
    .box2{
        width: 300px;
        height: 100px;
        background-color: red;
    }
Copy the code

4. After the last floating label, add a new label, set clear: both;

<style>
    .clear{
        clear: both;
    }
    .box1{
        width: 200px;
        height: 200px;
        background-color: blue;
        float: left;
    }
    .box2{
        width: 300px;
        height: 100px;
        background-color: red;
    }
</style>
<body>
    <div class="box1"></div>
    <div class="clear"></div>
    <div class="box2"></div>
</body>
Copy the code