Clearing a floated <li> correctly

Question

i dialy deal with float: left; and the CSS-reset by Eric Meyer with class="clearfix". But there is one special case, i wonder how to clear a floatd element correctly: Within <ul> ... </ul>.

Wrong height of the <ul> though using a clearer. The clearer should be within the <ul>. Let's try ...

Correct height, but the HTML-code ist not valid!

How can i clear the float within the <ul> with valid code?

Thanks, Johannes

Answer 1

Simply add overflow: hidden to the ul element's ruleset. Search for 'clearing floats' on Google or Stack Overflow for other solutions, though in this case this should be the cleanest.

jsfiddle demo: http://jsfiddle.net/9sxrN/1/

Answer 2

As I understand, float can be applied to block-elements, that can't be inserted in UL. (neither div, neither BR you can't insert in UL). In fact you can, but it isn't valid.

So, I covered your ul with div container:

<div class="ul-container">
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<br style="clear:both">
</div>
<b>The height of the ul-tag is ok, but the code is not valid!</b>

and css of ul a made css of .ul-container

.ul-container {
    border: 2px solid red;
}

ul li {
    float:left;
    background: #ccc;
    margin: 5px;
}

Answer 3

Use overflow:hidden; on the ul