当前位置：网站首页>Five methods to clear floating and their advantages and disadvantages

Five methods to clear floating and their advantages and disadvantages

2022-06-30 04:17:00 【Chang Li Lin】

We have to think first ： Why clear float ？

Source code ：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> Remove the floating </title>
<style>
    p{
        float:left;
        height:50px;
        width:50px;
        background-color: red;
        margin-left: 20px;
    }
</style>
</head>
<body>
<div>
    <p></p>
    <p></p>
</div>
<div>
    <p></p>
    <p></p>
</div>
</body>
</html>

design sketch ：

As shown in the figure , Four red squares are displayed side by side , There is no new line . Why? ？

Because the parent box has no height , The sub box is set to float and out of the document flow , The two red squares in the back will be next to the two red squares in the front .

One more question ： Why doesn't the parent box have a height ？

We think about , When the contents of the parent box are not fixed , It is the content that is updated in real time , We don't know how many child boxes there are in the parent box , The height cannot be determined .

So we need to clear the float , Give Way p The content of the label is completely in div in .

Remove the floating

Method 1 ： Make parent box form BFC, Use overflow：hidden attribute .

Source code ：

div{
        overflow: hidden;
    }

design sketch ：

Why add a to the parent box overflow：hidden; You can clear the float ？

First we need to understand BFC.BFC（ Block level formatting context ） Is an isolated independent container on the page ,BFC The child elements in the do not affect other elements .BFC You can cancel the height collapse of the box , It also prevents other elements from being overwritten by floating .

Add... To the parent box overflow：hidden; Can effectively form BFC, Clear the influence of the child box floating in the parent box on the page .

advantage ： Simple , convenient , High readability .

shortcoming ：overflow：hidden; There is a feature , After leaving the area where this element is located, it will be hidden .（ Hide the excess ）

Source code ：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> Remove the floating </title>
<style>
    div{
        overflow: hidden;
        border:1px solid black;
        width:150px;
    }
    p{
        float:left;
        height:50px;
        width:150px;
        background-color: red;
        margin-left: 20px;
    }
</style>
</head>
<body>
<div>
    <p> I just like you , I just like you </p>
    <p></p>
</div>
<div>
    <p></p>
    <p></p>
</div>
</body>
</html>

design sketch ：

Pictured , although p Tags will wrap automatically , however p The width of the label plus margin-left The length of is greater than the width of the parent box , Part of the content is beyond the parent box , And the excess is hidden , So less “ Just ” This word .

Therefore, this method is not ideal in practical application , Generally not used .

Method 2 ： Extra label method

Source code ：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> Remove the floating </title>
<style>
    *{
        border: 0;
        margin: 0;
        padding: 0;
    }
    div{
        border:1px solid black;
        width:160px;

    }
    p{
        float:left;
        height:50px;
        width:50px;
        background-color: red;
        margin: 10px;
    }
    .box1{
        clear:both;
    }
</style>
</head>
<body>
<div>
    <p></p>
    <p></p>
</div>
<div>
    <p></p>
    <p></p>
</div>
<div class="box1">   
<div>
</body>
</html>

design sketch ：

For the back box1 The box uses clear：both; attribute , Will box1 The left and right floats are cleared .

advantage ： Simple , convenient , Easy to master .

shortcoming ：1、 If it floats a lot , We will add a lot of useless boxes , Cause structural confusion , Later maintenance is very troublesome .

2、margin invalid .

Source code ：

    .box1{
        clear:both;
    }
    .box2{
        margin-top: 20px;
    }
</style>
</head>
<body>
<div>
    <p></p>
    <p></p>
</div>
<div class="box2">
    <p></p>
    <p></p>
</div>
<div class="box1">   
<div>
</body>
</html>

design sketch ：

Pictured , We added margin-top But it failed . Because first box has no height , The second box is for a box without height margin It's no use .

therefore , We generally do not use the second method .

Method 3 ： Partition wall removal method

Source code ：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> Remove the floating </title>
<style>
    *{
        border: 0;
        margin: 0;
        padding: 0;
    }
    div{
        border:1px solid black;
        width:160px;

    }
    p{
        float:left;
        height:50px;
        width:50px;
        background-color: red;
        margin: 10px;
    }
    .box1{clear:both;}
</style>
</head>
<body>
<div>
    <p></p>
    <p></p>
</div>
<div class="box1"></div>
<div>
    <p></p>
    <p></p>
</div>  
</body>
</html>

design sketch ：

We insert a box between two boxes , Use clear：both Property clear floating left and right .

advantage ： Simple , convenient .

shortcoming ： The two parent boxes still have no height ,margin invalid .（ But you can add height to the inserted box to increase the spacing ）

Method four ： Use pseudo elements

Source code ：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> Remove the floating </title>
<style>
    *{
        border: 0;
        margin: 0;
        padding: 0;
    }
    div{
        border:1px solid black;
        width:160px;

    }
    p{
        float:left;
        height:50px;
        width:50px;
        background-color: red;
        margin: 10px;
    }
    .clearfix:after{
        content: "";
        height:0;
        line-height:0;
        display:block;
        clear:both;
        visibility:hidden;
    }
    .clearfix{
        zoom:1;
    }
</style>
</head>
<body>
<div class="clearfix">
    <p></p>
    <p></p>
</div>
<div class="clearfix">
    <p></p>
    <p></p>
</div>  
</body>
</html>

design sketch ：

We add a class to the two parent boxes clearfix, In the end, a child element, the pseudo element, is added , Turn it into a block level element wrap , Reuse clear：both; You can clear the float .

advantage ： The parent box has a height ,margin It works . In line with the idea of closed floating , The structure is semantically correct .

shortcoming ： Are not compatible IE Lower version browser , Need to write extra zoom：1; Trigger hasLayout. Code length , Hard to master .

Method five ： Use double pseudo elements

Source code ：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> Remove the floating </title>
<style>
    *{
        border: 0;
        margin: 0;
        padding: 0;
    }
    div{
        border:1px solid black;
        width:160px;

    }
    p{
        float:left;
        height:50px;
        width:50px;
        background-color: red;
        margin: 10px;
    }
    .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear:both;
    }
    .clearfix{
        zoom:1;
    }
</style>
</head>
<body>
<div class="clearfix">
    <p></p>
    <p></p>
</div>
<div class="clearfix">
    <p></p>
    <p></p>
</div>  
</body>
</html>

design sketch ：

We add two pseudo elements back and forth to the two boxes and set table attribute , The two pseudo elements after becoming a table bring their own carriage returns , You can also embed content , Give again after The effect can be achieved by clearing the left and right floating of pseudo elements .

advantage ： Simple , convenient , There is no defect .