Clear fix HTML is not working in chrome? - html

Question

I've created this simple html :
there are 2 SPANs here.
one should be beneath the other by clearing the float.
The bbb element has float:left
And I used (on the aaa element ) , Facebook's "clearfix" CSS which is :
.clearfix:before { content: ""; display: table; }
.clearfix:after { content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix { zoom: 1; }
This is a valid way ( as facebook do) and as described here
However it works in FireFox : (look at the above picture)
But in chrome (v 24) it doesn't .
What am I missing ?

Answer 1

Your jsbin example has TWO typos/syntax errors and the clearfix code is NOT correct.
<span class=" clearfix"> you have a space before clearfix
<span class='fll'>bbbbb </span> you have single quotes instead of double quotes.
Change your html to:
<div class="clearfix">aaa </div>
<div class="fll">bbbbb </div>
and your CSS to:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
and it works (all browsers,IE6-7 included) http://jsbin.com/ukaxav/19/

Answer 2

.clearfix { display: block; }
Isn't it a "bit" more clean?

Answer 3

add display:inline-block; property to the parent div.
Code:
<div style="height: 100%; border: 1px solid blue;display: inline-block;">
<span class=" clearfix" style="">aaa </span>
<span class="fll">bbbbb </span>
</div>

Answer 4

Clearfix is intended to clear floats. meaning, on an element that contains float.
Not for clearing previous floats.So in your question, you are not putting the clearfix on the correct place, or misunderstand the principle.

Answer 5

Add a width: 100%; in your fll
so,
.clearfix:before {
content: "";
display: table; }
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden; }
.clearfix { zoom: 1; }
.fll
{
float:left;
width: 100%;
}