html - Correct way to clear floating elements inside <li>

Question

<ul style="overflow-y: auto;">
    <li><img style="float: left;"/>some text...</li>
    <li><img style="float: left;"/>some text...</li>
    <li><img style="float: left;"/>some text...</li>
</ul>

Is it neccessary with some kind of clearfix here? Or does each floating <img/> only affect the content of its corresponding <li>?

.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac */
.clearfix {  
  display: block;  
}

Answer 1

Floats are not contained by default. If the images are taller than the <li>, they will push the content of the following <li> to the right (float left of).

Some alternatives to clearfix can be to force a new block formatting context. The LIs will stretch to their content, so a popular method is:

li {
    overflow: hidden;
}

Compare http://jsfiddle.net/NvHVa/ vs http://jsfiddle.net/NvHVa/1/

Other ways to trigger a block formatting context: https://developer.mozilla.org/en-US/docs/Web/CSS/Block_formatting_context

For an explanation and a better method, check out http://colinaarts.com/articles/float-containment/