Question

When you have a floating element inside a container element you are required to either set the container to overflow auto or add a clear both after the floated element.

This makes sense as you are clearing the floated elements WITHIN the container.

However when using the clearfix CSS trick you are doing the clear after the container and NOT after the floated elements… I’m confused how this is working as you are now clearing the container and not the floats so it should surely still cause the container to have a dodgy height right? Because if I put the clear both AFTER the container with a physical element it would not work so why does it work with the :after ??

Anyone able to explain this? Thanks

Example:

<div style="border:#000 1px solid;padding:10px;">
    <div style="width:100px;height:100px;background:blue;float:left;"></div>
</div>
<div style="clear:both;"></div>

This would not work work but isn’t that what the clearfix virtually does?

Answer 1

The CSS :after pseudoelement means “after the element’s content, but still inside an element”, not “after the element itself”. This is why it works.

The mozilla documentation describes it as follows: