I'm feeling a bit puzzled and would really appreciate some guidance.
After reading the MDN article on float, I decided to try out their example by copying and modifying it. To my surprise, the floated element appeared to the left of the next element, just as I expected.
However, when I attempted a second test in jsfiddle, the floated element ended up being positioned on top of the next element.
(Please refer to the code snippets below).
Float to the left:
h4{
float: left;
margin: 0;
}<h4>HELLO!</h4>
<pre>
This is row 1 of some text.
</pre>
<pre>
This is row 2 of some text.
</pre>
<pre>
This is row 3 of some text.
</pre>
<pre>
This is row 4 of some text.
</pre>Float on top:
<div style="float: left; height: 100px; width: 100px; background: blue"></div>
<div style="height: 200px; width: 200px; background: orange"></div>I would greatly appreciate it if someone could shed some light on this issue for me.