What is the most suitable HTML5 element to be used for "clear: both;" purposes?

Question

I have:

<section>
    <ul>
        <li>....</li>
        <li>....</li>
        <li>....</li>
        ..
    </ul>
</section>

I want the <li> to be floating left and at the end of of these <li>, right after the </ul>, I need to put an element as clear: both; in order to keep sections block integrity.

Which html5 element would be most suitable for this purpose? Should I go for an invisible hr? a div?

Thank you.

Answer 1

None, use the overflow: hidden trick where appropriate.

If that isn't suitable, use a pseudo element. For example, you could use...

ul:after { 
    content: "";
    clear: both;
    display: block;
}