CSS clearfix doesn't seem to work

I'm trying to use clearfix instead of clear both, but it doesn't work for some reason. I did everything as the tutorials.

What should I do to make it work?

    * {
        margin: 0;
        padding: 0;
    }
    
  /* .first_div {
       width:50%; 
       height:50%; 
       background-color:red;
       margin: 50px auto;  
       overflow: auto;
     
    }*/
    
    .second_div {
        width:50px; 
        height:50px; 
        background-color:green;
        float: left;
     
     } 
    
    .third_div {
          width:50px; 
        height:50px; 
        background-color:blue;
         
     } 

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}

 
 <body>
  <div class="clearfix"> 
    <div class="second_div">sfddsf</div>
    <div class="third_div">sfdsfds</div>
 </div>
    </body>

Solution

Clearfix works on floated elements by clearing floats after the element. You are supposed to wrap floated elements with it and as a result, those elements wont be removed from the document flow. In your example third_div is not floated. It doesn't make much sense to clear float after the element which is not floated. There is nothing to clear there basically. On other hand, if you add clear: both property on the third_div, you are clearing the floating value before the third_div and as a result, its adding back second-div to the document flow. Depending on what you're trying to achieve, you have two solutions.

Example 1

If you need to display elements next to each other, you can float them both and wrap them in clearfix div.

CSS

.second_div {
    width:50px; 
    height:50px; 
    background-color:green;
    float: left;
} 
.third_div {
    width:50px; 
    height:50px; 
    background-color:blue;
    float: left;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

HTML

<div class="clearfix"> 
    <div class="second_div">Second div</div>
    <div class="third_div">Third div</div>
</div>

Example 2

If you need display them one under the other, then you only have to float and wrap one of them and the other one will automatically position itself below, following document flow.

CSS

.second_div {
    width:50px; 
    height:50px; 
    background-color:green;
    float: left;
} 
.third_div {
    width:50px; 
    height:50px; 
    background-color:blue;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

HTML

<div class="clearfix"> 
    <div class="second_div">Second div</div>
</div>
<div class="third_div">Third div</div>