What float does
float pushes an element to one side of its container and lets the text that follows wrap around it:
The margin on the floated box keeps the text from touching it. Margins are how you control that gap; the text itself cannot be given a margin toward the float.
The values
| Value | Result |
|---|---|
none (default) | No float |
left | Pushed to the left edge |
right | Pushed to the right edge |
inline-start | Pushed to the start of the line: left in English, right in Arabic or Hebrew |
inline-end | Pushed to the end of the line |
inline-start and inline-end follow the writing direction, so a layout built with them mirrors correctly on right-to-left pages. A floated element also becomes a block: display: inline is turned into block, so width and height apply even on a span or img.
Floating images in text
The classic use: an image inside an article, with text flowing around it. Float one to each side:
clear: stop wrapping
clear says "start below any earlier float on this side". Use it on the element that should not sit beside a float, such as the next section's heading:
The first heading squeezes in beside the float. The second one starts below it. clear accepts left, right, both, inline-start, inline-end and none.
The collapsing parent, and flow-root
Floats are out of the normal flow, so a container whose children are all floated has nothing in the flow and collapses to zero height. Its background and border end up as a thin line above the floats:
display: flow-root creates a new block formatting context, which always wraps its floats. Older code uses a "clearfix" for the same result:
.clearfix::after {
content: "";
display: block;
clear: both;
}
overflow: hidden or auto also contains floats, with the side effect of clipping; see overflow.
Floats are not for layout
Before flexbox and grid, whole page layouts were built from floated columns, with clearfixes and width math everywhere. That era is over: floats cannot center, cannot make columns the same height, and break when content changes size. Use display: flex or display: grid for rows and columns, and keep float for wrapping text around something. To center an image rather than wrap text around it, see how to center an image.
Wrapping around a shape
shape-outside lets text follow a shape instead of the float's rectangle. It only works on floated elements:
.avatar {
float: left;
width: 120px; height: 120px;
border-radius: 50%;
shape-outside: circle(50%);
margin-inline-end: 16px;
}
Common mistakes
- A parent with zero height. Its children are all floated. Add
display: flow-root. - Floats for columns or navigation. Use flexbox or grid.
- Expecting
float: center. It does not exist. Center with flexbox, grid ormargin: 0 auto. - Content after a float wrapping when it should not. Give it
clear: both, or put the float and its text in aflow-rootcontainer. - Physical
leftandrighton a multilingual site. Useinline-startandinline-endso the layout mirrors in right-to-left languages.
Frequently Asked Questions
What does float do in CSS?
It takes an element out of the normal flow and pushes it to the left or right edge of its container. Text and inline content that come after it wrap around it.
What does clear do?
clear moves an element below any earlier floats on the given side: clear: left, clear: right or clear: both. It is how you stop content from wrapping beside a float.
Why does the parent of a floated element have zero height?
Floats are out of the normal flow, so a parent with only floated children has no in-flow content and collapses. Add display: flow-root to the parent and it grows to contain its floats.
What is a clearfix?
A trick to make a parent contain its floats, traditionally a ::after pseudo-element with clear: both. Today display: flow-root on the parent does the same job in one line.
Should I use float for layout?
No. Floats were used for columns before flexbox and grid existed. Use flexbox or grid for layout, and keep float for its original job: wrapping text around an image or a pull quote.
