Floatutorial: Float basics

Float basics

What is a float?

When you float an element it becomes a block box. This box can then = be=20 shifted to the left or right on the current line. The markup options are = "float:=20 left", "float: right" or "float: none".

Exam= ple:=20 "float: left" element=20
Exam= ple:=20 "float: right" element

A floated box is laid out according to the normal flow, then taken = out of the=20 flow and shifted to the left or right as far as possible. Content can = flow down=20 the right side of a left-floated box and down the left side of a = right-floated=20 box.

Exam= ple:=20 "float: left" element with content flowing down right edge=20
Exam= ple:=20 "float: right" element with content flowing down left edge =

You can also put several floats beside each other.

Exam= ple:=20 three elements without any float applied=20
Exam= ple:=20 three elements with "float: left" applied=20
Exam= ple:=20 three elements with "float: right" applied

Where will a floated element move to?

Floated boxes will move to the left or right until their outer edge = touches=20 the containing block edge or the outer edge of another float.

Exam= ple:"float:=20 left" element against initial containing block=20
Exam= ple:=20 "float: right" element against initial containing block=20
Exa= mple:=20 "float: left" element against containing block=20
Exa= mple:=20 "float: right" element against containing block=20
Exam= ple:=20 "float: left" element against another floated box

If there isn't enough horizontal room on the current line for the = floated=20 box, it will move downward, line by line, until a line has room for it. =

Exam= ple:=20 "float: left" element shifted down

Do floated items need a width?

You should always set a width on floated items (except if applied = directly to=20 an image - which has implicit width). W3C's Cascading Style Sheets, = level 2,=20 CSS2 Specifications states:

"A = floated box=20 must have an explicit width..."

If no width is set, the results can be unpredictable. Theoretically, = a=20 floated element with an undefined width should shrink to the widest = element=20 within it. This could be a word, a sentence or even a single character - = and=20 results can vary from browser to browser.

Exam= ple:=20 "float: left" with no width set

Elements above and below floated elements

Block level elements above a floated element will not be affected by = it.=20 However, elements below will wrap around the floated element:

Exam= ple:=20 "float: left" element with block level element above=20
Exam= ple:=20 "float: left" element with element below

Borders, background images and background color

While content will wrap around a floated element, border, background = image=20 and background color will extend underneath.

Exam= ple:=20 "float: left" element with bordered block level element below=20
Exam= ple:=20 "float: left" element with background-colored block level element = below=20

If you do not want elements below a floated element to wrap around = it, you=20 can apply the clear property to the following element using "clear: = left",=20 "clear: right" or "clear: both".

Back = to main=20 menu →