title: How to indent list items using CSS when you have floating blocks?
body: <p>I observed a relative strange behavior when I use floating images in a document. The list items indentation is made relatively to the 'red line' instead of the 'green' one. </p>
  
  <p>Why is this happening and can I solve this?</p>
  
  <pre><code>&lt;img style="float: left"&gt;
  &lt;p&gt;some text&lt;/p&gt;
  &lt;ul&gt;
     &lt;li&gt;aaa&lt;/li
     &lt;li&gt;bbb&lt;/li
  &lt;/ul&gt;
  &lt;p&gt;some other text&lt;/p&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/ezEkD.png" alt="alt text"></p>