Floating left and right

Floating an element moves it to the side of a container. It also takes it out of flow, which is why the parent box doesn't expand to contain it.

a
float: left;
b
float: right;

Floats interaction with other floats

Note how the floats will appear out of order on the same line if floated in different directions.

Also note how the floats stack up and don't overlap. Floated elements will float to their configured side in the order they appear in the element tree. If there is note enough room vertically or horizontally they will be pushed down.

a
float: left;
b
float: right;
c
float: left;
d
float: left;
e
float: right;

Here's that same example with a wider container:

a
float: left;
b
float: right;
c
float: left;
d
float: left;
e
float: right;

Floats and line boxes

Line boxes flow around floats:

a
width: 110px; float: left;
b
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.

Same example with display: inline-block:

a
width: 110px; float: left;

A float will move horizontally on the same line box it starts, rather than to the top of the containing box:

Beginning of body contents Start of outer contents. Inline inner box float: right; End of outer contents. End of body contents.

Floats and block boxes

Block boxes force following floats below them, but blocks ignore floats. Note how here the block element is behind the float. Also note the order of the floats on the second line.

a
float: left;
b
c
float: right;
d
float: left;
e
float: right;

Here's an example with a smaller block box, showing again how floats stack on top of each other in order:

a
float: left;
b
float: right;
c
d
float: left;
e
float: left;

Clearing floats

You can stop an element being next to a float with clear: left/right/both. Note that you can only clear in a block formatting context, e.g. this means you can clear a floated element around another float element but you can't clear inline elements.

a
float: left;
b
float: right;
clear: left;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. vulputate.
a
float: left;
b
float: right;
clear: right;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. vulputate.
a
float: left;
b
float: right;
clear: both;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. vulputate.

Containing floats

A float is taken out of regular flow, so parents won't automatically expand to contain them:

a
float: left;

You can solve this in a few ways:

Clearfix
Using the clearfix hack. This involves adding an element after the float and setting it to clear the float.

a
float: left;

overflow: auto
Creating a new block formatting context using overflow: auto. This works because the spec says that if an element establishes a new block formatting context it must not overlap the margins of any floats in the same block formatting context.

overflow: auto;
a
float: left;

display: flow-root
Creating a new block formatting context using the new and not as widely supported display: flow-root. This is a more semantic approach, and also won't result in undesired scrollbars from setting overflow when you don't really want overflow.

display: flow-root;
a
float: left;