Clearfix using pseudo element

Clearfix using the `:after` pseudo element

by Lucas Krause

HTML

<div class=a><div class=b></div></div>

CSS

.a {
    background:#eee;
}
.a::after {
    content:"";
    clear:both;
    display:block; /*`display:block`, as well as `display:table` works properly*/
}
.b {
    float:left;
    width:50%;
    background:tomato;
    height:100px;
}