Clear fix HTML is not working in chrome?

Question

there are 2 SPANs here.

one should be beneath the other by clearing the float.

enter image description here

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 .

enter image description here

What am I missing ?

Looks like a chrome bug. `.clearfix:after { display:block }` with some content should do the same thing as having a real div at the end of the inside of the `.clearfix` span. But it doesn't. — Alohci, Feb 12 '13 at 14:41
I just had a look at facebook's code. They only seem to use this class on block-level content. Your first span is inline content AFAICT. — wds, Feb 12 '13 at 16:04
@wds yeah but then again , why to put clear on a div block which is automatically go to a new line. — Royi Namir, Feb 12 '13 at 16:39
@RoyiNamir I believe in most designs it's to stop different blocks from bleeding into each other. — wds, Feb 12 '13 at 16:45
@wds what do you mean by bldding ? `display:block` are seperated automatically. can you please elaborate ? — Royi Namir, Feb 12 '13 at 18:03
@RoyiNamir when the enclosing container doesn't take the height of its children, visually the contents of that container look like they're bleeding into the one below. http://stackoverflow.com/questions/8554043/what-actually-is-clearfix — wds, Feb 15 '13 at 15:24

George Katsanos · Accepted Answer · 2013-02-12T15:09:11.423

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/

edited Feb 12 '13 at 15:09

answered Feb 12 '13 at 14:36

George Katsanos

13,524
16
62
98

still u have single quote on second span – Sri Feb 12 '13 at 14:38
what do you mean "not working" ? it's the desired result. aaa shows first, in a new line bbbbb – George Katsanos Feb 12 '13 at 14:41
2

+1. this is now working. for your information there is nothing wrong with space a the class and it can also be used as `'`. the problem was with the actual class rules.(are facebook doing it not the right way ? ) – Royi Namir Feb 12 '13 at 14:42
2

Royi, I guess HTML is forgiving but If I were you I wouldn't try to discover how different browsers interpret random spaces or single quotes in the HMTL... It might be that you get weird results especially on less modern ones. – George Katsanos Feb 12 '13 at 14:43
With regards to the clearfix method I use since many years this one http://perishablepress.com/new-clearfix-hack/ which is rock-solid. (we have to support IE7 where I work..) – George Katsanos Feb 12 '13 at 14:44
I agree. p.s. are u telling me that FB are doing it wrong ? ( cause it is copy paste from their code) – Royi Namir Feb 12 '13 at 14:44
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/24383/discussion-between-george-katsanos-and-royi-namir) – George Katsanos Feb 12 '13 at 14:45
I asked you to confirm your question solved or not. If it's solved, then I just stop trying. Thanks – Sri Feb 12 '13 at 15:04
@BoltClock well , I didn't know it. – Royi Namir Feb 12 '13 at 19:34
@GeorgeKatsanos I've just seen your code lin e by line but you put on the clearfix - display:block. that's not what I wanted to achieve. id it's display block it can work without all these extra styles. – Royi Namir Feb 12 '13 at 19:39
Space within the `class` attribute value has nothing to do with the problem. The `class` is a space separated list of classes and if you have extra spaces at the start or at the end just adds more separators in the list and does't affect the behavior. The same applies to single quote vs quotation mark, either is allowed in HTML, you just have to use symmetric symbol (that is, start and end attribute value with the same character). – Mikko Rantalainen Dec 10 '21 at 12:52

score 0 · Answer 2 · answered Feb 12 '13 at 14:21

0

.clearfix { display: block; }

Isn't it a "bit" more clean?

answered Feb 12 '13 at 14:21

Fez Vrasta

14,110
21
98
160

there is a difference between display block and clear both. my question is about clearing the floats. – Royi Namir Feb 12 '13 at 14:25
Provide an exaustive jsfiddle and we'll can work on it. In your fiddle a simple "display: block" is enough. – Fez Vrasta Feb 12 '13 at 14:26
here. http://robertnyman.com/2007/04/12/how-to-clear-css-floats-without-extra-markup-different-techniques-explained/ have a look at this where the section is _Generating Content Through CSS_ – Royi Namir Feb 12 '13 at 14:28
I did some test, seems Chrome add the same display propriety of the element that generated it. With an !important the problem isn't fixed. But if you set "display: block" to your span also the CSS generated element will have block state. (not a solution, but it's what I've discovered) – Fez Vrasta Feb 12 '13 at 14:45

score 0 · Answer 3 · answered Feb 12 '13 at 14:22

0

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>

answered Feb 12 '13 at 14:22

Aratidgr8

431
4
11

this is causing the wrapper div to behave not as expected. div should be 100% by default. – Royi Namir Feb 12 '13 at 14:23
You need to add width:100%; to the parent div. – Aratidgr8 Feb 12 '13 at 14:54
Div being block element take 100% width by default of their parent container, But in your case there is parent element to main div, so I have specified div width as 100%. – Aratidgr8 Feb 12 '13 at 15:01

score 0 · Answer 4 · answered Feb 12 '13 at 14:25

0

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.

answered Feb 12 '13 at 14:25

Mark

6,762
1
33
50

I am clearing floats. this is what the after psuedo class is doing. look again at the code. – Royi Namir Feb 12 '13 at 14:26

score 0 · Answer 5 · answered Feb 12 '13 at 14:31

0

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%;
}

answered Feb 12 '13 at 14:31

Sri

2,233
4
31
55

addint 100% is another solution. but then you can remove the clearfix. my question is why the clear fix doesnt work. – Royi Namir Feb 12 '13 at 14:32
in here http://robertnyman.com/2007/04/12/how-to-clear-css-floats-without-extra-markup-different-techniques-explained/ you can see it is another solution but I want to use the clearfix. – Royi Namir Feb 12 '13 at 14:32

Clear fix HTML is not working in chrome?

5 Answers5