The float property
The float property - specifies floating
blocks that will be wrapped around by text. The
float property is sometimes used in
conjunction with the clear property,
which cancels an element floating.
Although float was originally invented
for inserting floated blocks into text, it is
now used very widely and in non-standard ways
for building layouts.
Syntax
selector {
float: left | right | none;
}
selector {
clear: both | left | right | none;
}
Values for float
| Value | Description |
|---|---|
left |
A block will float to the left and a text will flow around it to the right. |
right |
A block will float to the right and a text will flow around it to the left. |
none |
No floating. |
Default value: none.
Values for clear
| Value | Description |
|---|---|
left |
Cancels left float. |
right |
Cancels right float. |
both |
Cancels float on both the left and right. |
none |
No float cancellation. |
Default value: none.
Example
We use float in a non-standard way,
putting list items in a line:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
li {
float: left;
border: 1px solid red;
}
:
See also
-
the
clearproperty
that cancels float for specified side
