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?

1. zoom:1 is not valid by W3C and IE8 don't have hash layout problem
2. overflow:hidden and overflow:hidden were not made to do this,as the spec intended overflow to be used
3. <div class="clear"/> is not semantically correct and i don't want to add extra markup.
4. 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.

Answer 1

Using a clearfix

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

Answer 2

<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.