This property is used to position content side-by-side to lay out a web page. It has a default value of ‘none’ keyword and can take different keywords as
- left
- right
- none
When the float property is applied to an element, it acts like a block element. It is used as
h3 { float: left; }
In the example, the heading has the float property and aligns to left and anything following it just wraps around it. Thus it can be used to create columns out of text as in magazines or newspaper as
.left h2 { float: left; }
.right h2 { float: right; width: 500px; }
As in the example, the left floated heading is positioned alongside the right floated heading. It is illustrated in the figure
As floating repositions elements so that other content wraps around, floating applies some properties to the element as
- Floated elements do not have margin collapsing.
- Only contents of elements following a floated element are affected and not the backgrounds, margins, borders, padding and width.
- A floated element becomes a block element.
- A floated element’s sizing changes to shrink-to-fit horizontally and vertically if width and height is not given.
- Elements which are not floated but in a floated parent retain their original width unless given.
