float

value: left | right | none | inherit
initial value: none
inherited: no
percentages: N/A
applicable to: all elements

The float property specifies whether the element "floats" to the left or to the right. The default value is none, which does not need to be stated unless you are negating a float property put on the element from an earlier source.

To assign a float to an element will have different effects depending on the element and it's size and inherent properties. The floating will be in relationship to the elements containing element.

If multiple items with a containing element are set to float in the same direction, they will stack next to each other until the point that there is no more room in the containing element and the later elements will stack below earlier elements.

The floating element will not exceed the outer edge of the containing element.

If an element with a default display of a block element will become an inline element when the float property is applied.

The float property will cause the element to float to the inside parameter of the padding for the containing element.

Example:

div.outerbox {width: 80%; background: #eee;padding: 12px;}
h1 {float: left;background: #fff;}
p {float: right;width: 60%;background: #fff;}

Set to float: left;

Set to float: right; Set to float: right; Set to float: right; Set to float: right; Set to float: right; Set to float: right; Set to float: right; Set to float: right; Set to float: right; Set to float: right;

In the above example you can see that the outer edge of the <h1> element floats to the padding of the containing <div> element. The same applies to the <p> tag set to float: right.

The float property can aid the layout of a web page, but it can be tricky. If the element(s) with the float do not take up the entire container, the next element will rise up to fill the area that is left. To prevent that from occurring, you can assign a style to the next element of clear: both; You can also set it to clear: right or clear: left.