You can float elements to the left or right, but this only applies to elements that generate boxes that are not absolutely positioned. Any element that comes after the floated element will wrap around it on the opposite side.
The float property can take one of three values:
| Value | Description |
|---|---|
left |
The element floats on the left side of its container. |
right |
The element floats on the right side of its container. |
none |
Removes the floating behavior from an element. |
A floated element is removed from the normal flow and shifted as far left or right as possible within the available space of its container.
Other elements typically flow around floated items, unless their clear property prevents it. Floating occurs horizontally, meaning elements can only float left or right, not up or down.
img {
float: left;
}If multiple floating elements are placed adjacent to each other, they will float next to one another if there's enough horizontal space. If there isn't enough space, the float is shifted downward until it fits or there are no more floating elements.
.thumbnail {
float: left;
width: 125px;
height: 125px;
margin: 10px;
}Elements that come after a floating element will wrap around it. The clear property determines which sides of an element's box cannot have other floating elements.
.clear {
clear: left;
}Note: The clear property only removes an element from floated boxes within the same block. It doesn't remove the element from floated child boxes within the element itself. To find out more about clearing float, check out the tutorial on CSS Alignment.