Как смещать элементы списка с помощью CSS, когда у вас есть плавающие блоки?

Я наблюдал относительно странное поведение, когда использую плавающие изображения в документе. Отступ пунктов списка сделан относительно «красной линии», а не «зеленой».

Почему это происходит и могу ли я решить эту проблему?

<img style="float: left">
<p>some text</p>
<ul>
   <li>aaa</li
   <li>bbb</li
</ul>
<p>some other text</p>