Почему мое clearfix не работает?

Question

Это clearfix, которое я нашел в Интернете. У меня 3 столбца, и я пытаюсь поместить clearfix после крайнего правого столбца.

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

Однако он не очищает поплавки ... Что я делаю неправильно?

Answer 1

вы используете двойной ::, попробуйте использовать один :

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

Чтобы сделать clearfix работу, вам нужно, чтобы обернуть поплавки в контейнере , у которого есть 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

Пожалуйста, попробуйте следующее clearfix хак:

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