Clearing list items without being able to edit the HTML?

Question

I am using a Wordpress plugin which generates an unordered list, I can modify the layout with CSS but I cannot edit the HTML(to insert a clearfix div after the last li). I am trying to create a grid from the list using float:left; and trying to figure out how I can apply a clearfix to the list items so that the ul does not have a height of 0. Any ideas?

HTML:

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

CSS:

li {
  background:#000;
  color:#fff;
  display:inline;
  float:left;
  margin-bottom:20px;
  margin-right:3%;
  overflow:hidden;
  position:relative;
  width:30%;
}

JSFiddle

Answer 1

This should make the ul encompass all floated children, and clear the fix as well:

ul {
overflow: auto;
}