Float

By default elements of a website are placed one below the other.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>float</title>
        <style media="screen">
            img {
                width: 33vw;
            }
        </style>
    </head>
    <body>
        <img src="img/share_banner.jpg" alt="">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
    </body>
</html>

float_without

Float

With the property float elements can be placed next to each other. In the following example the image is set to float: right.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>float</title>
        <style media="screen">
            img {
                width: 33vw;
                float: right;
            }
        </style>
    </head>
    <body>
        <img src="img/share_banner.jpg" alt="">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
    </body>
</html>

float_right

Multiple elements with float property:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>float</title>
        <style media="screen">
            img {
                width: 32vw;
                float: left;
            }
        </style>
    </head>
    <body>
        <img src="img/share_banner.jpg" alt="">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
        <img src="img/share_banner.jpg" alt="">
        <img src="img/share_banner.jpg" alt="">
    </body>
</html>

float_multiple

Clear

In the example above all images are floating to the left taking as less space as possible. If the two images to the right should be placed below the other elements, we can use the property clear (see the inline style for the second image). The element with that property will be placed below the previous elements. In the example below it’s necessary to use clear: left, otherwise it will be placed below the paragraph, so nothing will change. For more possible values and their meaning see W3.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>float</title>
        <style media="screen">
            img {
                width: 32vw;
                float: left;
            }
        </style>
    </head>
    <body>
        <img src="img/share_banner.jpg">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
        <img src="img/share_banner.jpg" style="clear: left;">
        <img src="img/share_banner.jpg">
    </body>
</html>

float_clear