How to indent list items using CSS when you have floating blocks? -

When I use floating images in a document, then saw a relative strange behavior. List item indentation is compared to 'red line' instead of 'green'

Why is this happening and can I solve it?

  & 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; Any other text & lt; / P & gt;  

simply ul {list-style-position: inside; } because it is set out by default, not sure why.