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

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

ul {
  overflow: auto;
}

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