CSS Float and Clear Properties

Use float to make block elements line up side by side on the page.

float:left - will cause each floated element to move as far left on the page as it can -- until it bumps against another element.
float:right - does the same, but elements line up to the right

Use clear to end the effect of the float on the previous element so that this element moves below the previous one

clear:left - apply this property to the next element after an element that has been floated left so that the element will move below the floated element
or clear:right - does the same, but for elements that have been floated right

Exercises

In the code below, take note of which <p>

float

clear

Try floating paragraph seven to the left and eight to the right.
What happens if you don't apply clear:left to paragraph eight and clear:right to paragraph nine?

        <!DOCTYPE html>
<html>
  <head>
     <title>CSS Float Property</title>
     <style>
        p {
            margin: 5px;
            border-style: solid;
        }

        .left {
            float: left;

            background-color: lightblue;
        }

        .right {
            float: right;
            background-color: lightgreen;
         }
     </style>
  </head>
  <body>
    <p class="left">one</p>
    <p class="left">two</p>
    <p class="left">three</p>
    <p class="right" style="clear:left">four</p>
    <p class="right">five</p>
    <p class="right">six</p>
    <p style="clear:right">seven</p>
    <p>eight</p>
    <p>nine</p>
    
  </body>
</html>

← click the button when you are done editing

CSS Float and Clear Properties

Exercises

References