Float & Clear
Floats are a tool for wrapping text or other content around a particular element. Once used broadly for layouts, floats are now, more properly, used primarily for basic text flows.
Float
The CSS float property allows you to place an element on either the left or right side of the container while other content wraps or flows around it on the opposite side.
An element can be floated right:
An element can also be floated left:
You can also disable a previously set float using float: none;
Clear
When an element is floated, all following content will wrap around it, so long as there is space. For example:
In the above examples, try removing the floats. What happens to the layout without them? What happens when you add them back in? What about when you change the side to which the image is floated?
For an element that follows an element that is floated, you can apply the clear property to cause it to break to below the floated element rather than wrapping to its side.
The clear property exists to stop an element from wrapping around another element that is floated.
clear can accept a value of left to clear an element floated left, right to clear an element floated right, or both, which clears all floats.
A good metaphor for clear is that it is like an invisible bar at the top of the element that sticks out to the side defined and forces the element to below anything the bar hits.
In the above example, try changing the values for float and for clear. What happens when they match? What happens when they don't?
Video Lesson
The following video demo is fully interactive. You can pause it at any time to directly edit the code, and resume playback to pickup where you left off.