<style>
img {
    width: 100%;
    height: auto;
}
figure {
    width: 20%;
}
</style>

<!-- EXAMPLE 1 ---------------------------------------------------------------->

<figure style="float: left;">
    <img src="grad.png">
    <figcaption>Fig 1: wow such colors</figcaption>
</figure>

<p><i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam
faucibus. A iaculis at erat pellentesque adipiscing. Dolor morbi non arcu risus
quis varius quam quisque. Fermentum odio eu feugiat pretium. Nibh nisl
condimentum id venenatis. Gravida dictum fusce ut placerat orci nulla. Pulvinar
etiam non quam lacus suspendisse faucibus interdum posuere. Pulvinar
pellentesque habitant morbi tristique senectus et netus et malesuada. Sem
fringilla ut morbi tincidunt augue interdum. Consectetur purus ut faucibus
pulvinar elementum. Dui faucibus in ornare quam. Sodales ut etiam sit amet
nisl. Nunc scelerisque viverra mauris in aliquam. Nec sagittis aliquam
malesuada bibendum arcu vitae elementum curabitur.
</i></p>

<figure style="float: right;">
    <img src="grad.png">
    <figcaption>Fig 2: wow such colors again</figcaption>
</figure>

<p><i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam
faucibus. A iaculis at erat pellentesque adipiscing. Dolor morbi non arcu risus
quis varius quam quisque. Fermentum odio eu feugiat pretium. Nibh nisl
condimentum id venenatis.
</i></p>

<!-- EXAMPLE 2 ---------------------------------------------------------------->

<hr style="clear: both">

<figure style="float: left;">
    <img src="grad.png">
</figure>

Floats can be next to each other on the same height.

<figure style="float: right;">
    <img src="grad.png">
</figure>

<!-- EXAMPLE 3 ---------------------------------------------------------------->

<hr style="clear: both">

<figure style="float: left;">
    <img src="grad.png">
</figure>

The css property <code>clear: {left, right, both};</code> controls how elements
should be handled relative to the previous floating element.

<figure style="float: right; clear: left;">
    <img src="grad.png">
</figure>

<p><i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam
faucibus. A iaculis at erat pellentesque adipiscing. Dolor morbi non arcu risus
quis varius quam quisque. Fermentum odio eu feugiat pretium. Nibh nisl
condimentum id venenatis. Gravida dictum fusce ut placerat orci nulla. Pulvinar
etiam non quam lacus suspendisse faucibus interdum posuere.
</i></p>

<!-- EXAMPLE 4 ---------------------------------------------------------------->

<hr style="clear: both">

<div style="overflow: auto; border: 2px solid red;">
<figure style="float: left;">
    <img src="grad.png">
</figure>
<code>overflow: auto</code> gives an alternative to <code>clear</code> to
control placement of the floats. The red boarder visualizes the size of the
<code>&ltdiv&gt</code> block. One can remove the <code>overflow</code> property
and observe how the border changes.
</div>

<figure style="float: right;">
    <img src="grad.png">
</figure>