What is Logically and semantically correct, A-grade browsers compatible and W3C valid way to clear float?

Question

What is Logically correct and W3C valid way to clear float?

zoom:1 is not valid by W3C and IE8 don't have hash layout problem
overflow:hidden and overflow:hidden were not made to do this,as the spec intended overflow to be used
<div class="clear"/> is not semantically correct and i don't want to add extra markup.
clearfix hack generates content that really hasn’t any semantic value.

I've asked many questions and read many articles on this issue but haven't find best way.

**Logically correct and W3C valid way** and **compatible with IE6** is kind of an impossible requirement... — jeroen, Nov 19 '09 at 15:51

score 1 · Answer 1 · answered Nov 19 '09 at 14:56

1

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

answered Nov 19 '09 at 14:56

marcgg

65,020
52
178
231

it gives Parse Error *emphasized text* in W3C validation – Jitendra Vyas Nov 19 '09 at 14:59
"Congratulations! No Error Found.". It's valid – marcgg Nov 19 '09 at 15:00
What does last part? and is your solution compatible with IE6 ,7, 8 and latest firefox, safari (MAC and windows, Google Chrome and opera)? – Jitendra Vyas Nov 19 '09 at 15:02
It's just an example of clearfix. It's hacky to handle IE and co and I'm not sure how it works but it works. There are a lot of variations on the subject ( http://bytesizecss.com/blog/post/the-clear-fix ). Consider googling "css clearfix" and see if one fits better for you – marcgg Nov 19 '09 at 15:08
this method generates content that really hasn’t any semantic value. – Jitendra Vyas Nov 19 '09 at 16:08
Your hack would be better placed in a IE-only CSS (e.g., http://www.quirksmode.org/css/condcom.html) – BryanH Nov 19 '09 at 16:22

score 1 · Answer 2 · answered May 22 '10 at 04:37

<div class="clear"/> is not semantically correct and i don't want to add extra markup.

That's why often a <br class="clear"> is been used. You basically want to have a linebreak between the float and the next element. True, it's not nice in the markup, but that's the payoff of using floats.

Alternatively you can also just set a clear: both; on the subsequent block element which you'd like to put in the next line.

What is Logically and semantically correct, A-grade browsers compatible and W3C valid way to clear float?

2 Answers2