how to clear the last <li> tag within a <ul>

Question

I know this is pretty basic, but it is giving me hangups. I have a basic list:

<ul>
    <li><a href="#">Insert Link Here</a></li>
    <li><a href="#">Insert Link Here</a></li>
    <li><a href="#">Insert Link Here</a></li>
</ul>

What do I need to do to make sure the last <li> item gets cleared? I've tried adding style="clear:both" to the end with no avail. Also I've added a 'div' after the last <li> tag before the closing </ul> tag, that works, but I know it doesn't validate.

Answer 1

If you want to have the background behind a block item which has only floated items inside, then:

ul {
  overflow: auto;
}

Answer 2

Given that you've found "[adding] a div after the last <li>...works" why not try adding another <li>, give it a class-name of, for example clearing and:

li.clearing {display: block; clear: both; }

If you need this to take up little, or no, room then adding height: 0; background-color: transparent; border: 0 none transparent; should prevent its being visible, while still causing the clearing to occur.

It would almost certainly be a benefit if you could add your use-case, and explain, as the comment asked: what do you want? (and I say that with trepidation, after watching too much Babylon 5 recently).