1. Allowing Elements to Float
Elements can be made to float in a sea of text or indeed within other elements and this technique can be used to create multi-column layouts and much more.
a: Type float:
b: If you want the element on the left but the rest of the content to flow right then type left.
If however you want the element on the right but with the rest of the content floating to its left then you need to type right.
c: use the width property to accurately set the width of the element.
It is important to remember that the direction that you choose applies to the element that you're floating and not to the elements that flow around it.
If you float: left then the rest of the page flows to the right and vice versa.
2. Controlling Where Your Elements Float
You are able to control which elements an element can float next to and those which it cannot. If you want to stop an element from floating next to something which it shouldn't be floating next to then you need to use the clear property.
To control where elements float:
a: Firstly type clear: then....
(i) To stop elements from floating to the left of the element you are styling then type left
(ii) To stop elements floating to the right of the element you are styling then type right
(iii) To stop elements from floating to either side of the element you are styling then type both
(iv) To allow elements to flow to either side of the element you are styling then type none.
You will generally add the clear property to the element whose sides you want to be clear of floating objects. Accordingly it stands to reason that if you want an element to not be displayed until the right side is clear of floating elements then you need to add clear: right to it and not to the floating elements themselves.