CSS float on content inside an anchor or other inline elements

Question

Let's say I have the following markup:

<li style="width: 200px;">
    <a href="....">
        <img style="width: 50px;" src="..." />
    </a>
    Lorem ipsum...
</li>

And that I would like the image to be floated to the left.

Should float: left be applied to the image tag or the anchor tag that contains it? Both are inline elements anyway. Is there a recommended practice or convention in regards to that?

EDIT: Perhaps I forgot to specify there's text present after the image, and the required result is the image should be aligned to the left of course with the text and the right.

Answer 1

Floating elements with non explicit width is unpredictable, so I would go with the image, or better yet would give the anchor an explicit width and make it block, to minimise any indirect changes.

Be aware though that if you float the image when the anchor isn't floated, the anchor will collapse to zero width (and height). This is because the image is taken out of the normal flow of the page when floated. if you float the anchor, this will happen to the parent of the anchor.