Two ways to clear float in HTML

1. Clear floating method 1

Set the height of the previous parent element. Note: In enterprise development, do not write the height if you can.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D131_ClearFloat</title>
    <style>
        .smallbox1{
            width:100px;
            height:100px;
            background-color: red;
            body:3px solid black;
            margin:5px;
            float:right;

        }
        .smallbox2{
            width:100px;
            height:100px;
            background-color: red;
            body:3px solid black;
            margin:5px;

        }
        .smallbox3{
            width:100px;
            height:100px;
            background-color: red;
            body:3px solid black;
            margin:5px;

        }
        .smallbox4{
            width:100px;
            height:100px;
            background-color: red;
            body:3px solid black;
            margin:5px;

        }
        .smallbox5{
            width:100px;
            height:100px;
            background-color: red;
            body:3px solid black;
            margin:5px;

        }
        .smallbox6{
            width:100px;
            height:100px;
            background-color: red;
            body:3px solid black;
            margin:5px;

        }
        .bigbox1,.bigbox2{
            /*width:400px;*/
            /*width:400px;*/
            background-color: green;
            border:3px black solid;
        }
</style>
</head>
<body>
<div class="bigbox1">
    <div class="smallbox1"></div>
    <div class="smallbox2"></div>
    <div class="smallbox3"></div>
</div>
<div class="bigbox2">
    <div class="smallbox4"></div>
    <div class="smallbox5"></div>
    <div class="smallbox6"></div>
</div>
</body>
</html>

2. The second way to clear floating

Add the clear attribute to the following attributes

Clear attribute value:

None: Default value, sorting is done according to the sorting rules for floating elements (left floating finds left floating, right floating finds right floating)

left: Do not look for the previous left floating element

right: Do not look for the previous right floating element

both: Do not look for the previous left floating and floating elements

For example, if we do not set the width and height of the large box, the small box will support the large box, but the two large boxes will be on the same line.

 .smallbox1{
            width:100px;
            height: 100px;
            float:left;
            background-color: red;
            border:2px solid black;
        }
        .smallbox2{
            width:100px;
            height: 100px;
            float:left;
            background-color: red;
            border:2px solid black;
        }
        .smallbox3{
            width:100px;
            height: 100px;
            float:left;
            background-color:blue;
            border:2px solid black;
        }
        .smallbox4{
            width:100px;
            height: 100px;
            float:left;
            background-color: blue;
            border:2px solid black;
        }
    </style>
</head>
<body>
<div class="bigbox1">
    <div class="smallbox1"></div>
    <div class="smallbox2"></div>
</div>
<div class="bigbox2">
    <div class="smallbox3"></div>
    <div class="smallbox4"></div>
</div>
</body>

We use the clear attribute on the third box so that it can be put on a new line (the fourth box doesn’t need it because we want the third box to be next to the fourth box). We only need to modify the code of the third box.

      .smallbox3{
            clear:left;
            width:100px;
            height: 100px;
            float:left;
            background-color:blue;
            border:2px solid black;
        }

Note: The margin attribute is invalid. We will talk about how to fix it next time.

3. Source code:

D131_ClearFloat.html

D132_CLearAttribute.html

address:

https://github.com/ruigege66/HTML_learning/blob/master/D131_ClearFloat.html

https://github.com/ruigege66/HTML_learning/blob/master/D132_CLearAttribute.html

Summarize

The above are two of the ways to clear HTML floats that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<: A brief talk on responsive design

>>: Sample code for implementing DIV suspension with pure CSS (fixed position)