float property allows you to place an element on either the
right side of the container while other content wraps or flows around it on the opposite side.
An element can be floated
An element can also be floated
You can also disable a previously set float using
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?
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.