CSS floated images and text wrapping - css

Question

I am trying to float the image to left, wrap the description around the image, and float the location to the bottom left by using float and clear properties: https://jsfiddle.net/darf4ama/5/
<aside>
<h2>Photo Posts</h2>
<p><img src="http://lorempixel.com/200/300/animals/" alt="Image Title"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Image</p>
</aside>
aside img {border: 2px dotted yellow; float: left;}
aside:first-of-type p:first-of-type {border: 2px dotted blue;}
aside:first-of-type p:nth-of-type(2) {border: 2px dotted green; float: left; overflow: auto;}
aside:first-of-type p:last-child {border: 2px dotted red; float: left; clear: both; font-style: italic;}
I think I have floated the image and the location and have cleared these two properties correctly. However I can't seem to float and clear paragraph 2. What am I doing wrong here?

Answer 1

Float does change the behaviour of elements
you might consider of using flex box
if you want to have the image and paragraph next to each other with a margin to it
check the following snippet
aside{
display:flex;
border:1px solid red;
}
aside img {border: 2px dotted yellow; }
aside p:nth-child(2){
margin:10px;
border:2px solid green;
}
<h2>Photo Posts</h2>
<aside>
<p>
<img src="http://lorempixel.com/200/300/animals/" alt="Image Title">
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</aside>
<p>Image</p>
Hope this helps