07. Float

CSS layouts used to heavily rely on a CSS property known as float.

With float values of left or right could be applied to move HTML elements (float them) to the left or right respectively. This technique was used in combination with the box model to stack HTML elements to create grids. The most well-known exponent of this technique was the CSS Bootstrap framework.

However, modern browser support for flexbox is such that you no longer need to use the float technique for layouts. As such float can be relegated to what it was originally designed for which is allowing an element to be placed along the left or right side of its container. This then allows text and inline elements to wrap around the floated element.

In the index.html add the following <img> tag to the second paragraph of text.

<img src="images/300x200.jpg" alt="" class="left-float">

In the main.css create a rule .left-float as follows:

.left-float{
    float:left;
    padding:0 15px 15px 0;
}

The image will now 'float' to the left allowing text to flow around it. A padding value of 15px is set to the right and bottom only, in order to pad the image away from the text.

Tip

Try creating a .right-float rule and floating an image to the right hand side.