CSS Float and Clear Properties
Use float to make block elements line up side by side on the page.
Use clear to end the effect of the float on the previous element so that this element moves below the previous one
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
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
clear:right - does the same, but for elements that have been floated right
- In the code below, take note of which <p> elements have float or clear properties applied to them and how this has affected their positions on the page.
- 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?
← click the button when you are done editing
<title>CSS Float Property</title>
<p class="right" style="clear:left">four</p>