Several methods, functions and summary of clearfix clearing floating

clearfix clear float

Floating phenomenon

Float

Imagine that a float can be moved left or right until its outer edge touches the border of another box or another floater.

Floating effect:

<body>
    <div class="container">
        <div class="left"> 

        </div>
       <div class="right">

        </div>
    </div>
</body>
<style>
    .container{
        width: 300px;
        border: 1px solid #000;
        background-color: gray;
    }
  .left{
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
    }
    .right{
        width: 100px;
        height: 100px;
        background-color: blue;
        float: right;
    }
</style>

The floating effect of the above code is as follows:

Phenomenon:

It can be seen that the child element does not open the parent container, causing the parent element to collapse

Clear floating method

There are four ways to clear the float:

  • Add a class named clear
  • Add overflow:hidden style to parent container
  • Add overflow:auto style to parent container
  • Add after pseudo element named after clearfix for class

Add a class named clear:

Add a clean named < div > after the floating element, and add a. clear{clear:both} style to the Div

The code is as follows:

<body>
    <div class="container">
        <div class="left"> 

        </div>
        <div class="right">

        </div>
       <div class="clear">

       </div>
    </div>
</body>
<style>
    .container{
        width: 300px;
        border: 1px solid #000;
        background-color: gray;
    }
  .left{
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;

    }
    .right{
        width: 100px;
        height: 100px;
        background-color: blue;
        float: right;
    }
    .clear{
        clear:both;
    }

Effect:

Add the overflow:hidden style to the parent container:

After adding overflow:hidden to the parent element style, add zoom:1;
The code is as follows:

<body>
    <div class="container">
        <div class="left"> 

        </div>
        <div class="right">

        </div>
    </div>
</body>
<style>
    .container{
        width: 300px;
        border: 1px solid #000;
        background-color: gray;
        overflow:hidden;
        zoom:1;
    }
  .left{
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
    }
    .right{
        width: 100px;
        height: 100px;
        background-color: blue;
        float: right;
    }
</style>

As a result:

Add overflow:auto style to the parent container:

Just like adding overflow:hidden method, only when the hidden attribute is changed to auto, you need to add zoom:1;
The replacement code is as follows:

    .container{
        width: 300px;
        border: 1px solid #000;
        background-color: gray;
        overflow:auto;
        zoom:1;
    }

The floating effect is the same:

Add the after pseudo element named clearfix for class:

The last is a convenient way for individuals to use. Add the following code to the css Style:

.clearfix:after{
    display:block;
    clear:both;
    content:"";
    visibility:hidden; 
    height:0;
} 
.clearfix{zoom:1}

Add it after class in HTML and call it directly as follows:

<style>
    .container{
        width: 300px;
        border: 1px solid #000;
        background-color: gray;
    }
  .left{
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
    }
    .right{
        width: 100px;
        height: 100px;
        background-color: blue;
        float: right;
    }
    .clearfix:after{
    display:block;
    clear:both;
    content:"";
    visibility:hidden; 
    height:0;
} 
.clearfix{zoom:1}
</style>

Cleaning effect:

Conclusion:

  1. After the floating element, add the clear named < div > and. clear{clear:both} style to the div:
  • Advantages: simple, less code
  • Disadvantages: add page labels, resulting in structural confusion
  • Recommended index: ☆

2. Add overflow:hidden or overflow:auto style to the parent container:

  • Advantage: just add code to the parent container, easy to operate
  • Disadvantage: add style label
  • Recommended index: ☆
  1. Add the after pseudo element named clearfix for class:
  • Advantages: set common classes, reduce css code, and apply directly
  • Disadvantage: the class of clearfix needs to add zoom: 1
  • Recommended index

Tags: Front-end Attribute less

Posted on Tue, 17 Mar 2020 21:09:38 -0700 by gammaster