float: left;

Now let’s see some examples of how this works. In the following example, we have two block-level image elements, which by default are rendered on top of one another. Remember, this is the standard behaviour for block-level elements.

5.19

Obviously this isn’t ideal in all situations. Commonly you will want to have elements next to each other as well. This is when floats are utilized.

5.20

In the above example, where a float: left rule has been applied to the class, we can see that the image has been wrapped up tightly and pushed next to the other image. This is the exact nature of a float, it squeezes up an element and forces it into the next bit of available space it can find from the direction specified.

When we state float: left, imagine the element in question starts its journey from the very left position of the parent container and works its way across to the right, finding the first bit of space big enough to contain it. Likewise if we select float: right, the same journey will happen, but from the right-hand side of the page.

Now that we have these images next to each other, we can still make use of all the box model properties we want. Let’s add a bit of a margin to the class to space out the images a bit. You can start to see how useful and powerful the box model properties are showing themselves to be already.

5.21

Floats and inline elements

Let’s see what using a float on a block-level element next to an inline element does to the flow of a webpage. Take a look at the following example: