Why is my clearfix not working?

Question

This is a clearfix that I found on the internet. I have 3 columns and I am trying to put the clearfix after the far right column.

.right::after{
   content: " ";
   display: table;
   clear: both;
}

However it does not clear the floats... What am I doing wrong?

Answer 1

you are using double ::, try using one :

.right:before,
.right:after {
    content: "";
    display: table;
    clear: both;
}

To make a clearfix work, you need to wrap your floats in a container that has the clearfix:

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
.left {
    float: left;
}

<div class="clearfix">
    <div class="left">first</div>
    <div class="left">second</div>
    <div class="left">third</div>
</div>

Answer 2

Please try the following clearfix hack:

.right:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }