Question

Ladies and Gentlemen,

For quite a long time now, I’ve been using the following CSS technique to break float by clearing:

{
    display: block;
    content: ".";
    clear: both;
    font-size: 0;
    line-height: 0;
    height: 0;
    overflow: hidden;
}

I would then assign this set of rules to the :before or :after pseudo-elements (or, nowadays, seems to be ::before and ::after, though they’re supposed to fall back to the primer). This, logically, is exactly the same thing as creating a block element either before or after the element, with clear:both, overflow:hidden and no special semantic meaning to the browser.

This allowed me to break the float without putting misleading/ambiguous and lengthy HTML elements (like <div class="clear"></div>) in the code, but still having my unfloated parent accomodate for all the floated children. However, this doesn’t seem be working in many cases on FireFox anymore. Question: why..?

It also seems that there’s no way to inspect these pseudo-elements in the sidebar to see what actually goes on.

Thanks and Regards

Answer 1

Use this:

.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}

It’s cross-browser and works.

Example:

<div class="clearfix">
   <div style="float:left;">1</div>
   <div style="float:left;">2</div>
   <div style="float:left;">3</div>
   <div style="float:left;">4</div>
</div>

Added style="float:left;" to show they are floating, but don’t use inline CSS.
No need for extra markup just to clear.