CODEWITHSUNDEEP
htmlcss
Phil
Phil

Reputation: 14651

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

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.

Upvotes: 5

Views: 1258

Answers (2)

alex
alex

Reputation: 490263

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

Upvotes: 5

sandeep
sandeep

Reputation: 92793

You can use .clearfix method for this. Write like this:

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

Upvotes: 3

Related Questions