styling element with float left gives problems (loses focus)

<style type="text/css">
ul{
list-style:none;
}

ul li {
float:left;
margin:5px;
}</style>
<ul>
   <li>
      Header 1<br />
      <img alt="" src="http://a.cksource.com/c/1/inc/img/demo-little-red.jpg" /></li>
   <li>
      &nbsp;</li>
   <li>
      Header 2<br />
      <img alt="" src="http://a.cksource.com/c/1/inc/img/demo-little-red.jpg" /></li>
   <li>
      &nbsp;</li>
   <li>
      Header 3<br />
      <img alt="" src="http://a.cksource.com/c/1/inc/img/demo-little-red.jpg" /></li>
   <li>
      &nbsp;</li>
</ul>