Float Property
Last updated: 2026-09-13
float Float Property
The float property takes an element out of the normal flow and floats it left or right until its edge touches the containing block or another floated element. Originally designed for wrapping text around images, it was later used heavily for multi-column layouts; now that Flexbox and Grid are widespread, it has returned to its original purpose.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | all |
| Animation Type | discrete |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
float: none | left | right | inline-start | inline-end;⚙️ Values
| Value | Type | Description |
|---|---|---|
left | right | none | Keyword | The direction the element floats. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| float | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Warning： A floated element leaves the document flow, so its parent may lose awareness of its height and collapse. Common ways to clear floats: overflow:hidden on the parent, or a ::after pseudo-element.
Tip： For multi-column layouts, prefer Flexbox or Grid; float is better suited to native scenarios like wrapping text around images.
❓ FAQ
QHow do I clear floats?
AThree common approaches: first, overflow:hidden or auto on the parent, wrapping the floated children in a BFC; second, the pseudo-element method, which is recommended: .clearfix::after{content:'';display:block;clear:both}; third, display:flow-root on the parent. All three make the parent contain its floated children again and recover the collapsed height. In new code, flow-root is the most elegant, while the clearfix class still appears in most existing codebases.
QWhat's the difference between float and display:inline-block?
Afloat takes the element out of the flow and pushes it left or right, letting following content wrap around it, and the parent may collapse in height. inline-block keeps the element in the flow, arranges it horizontally with no wrapping effect, and leaves default whitespace gaps between items, which can be removed with font-size:0. In short, float is for text wrapping and early column layouts, while inline-block is for horizontal lists and navbars.
QWhy does float collapse the parent's height?
AA floated element leaves the normal flow, so the parent cannot perceive its height and assumes there is nothing inside, collapsing to zero or to the height of non-floated content only. The fix is to make the parent contain the float again: overflow:hidden or auto creates a BFC, a clearfix pseudo-element clears it, or display:flow-root does the same. Flex and grid containers do not collapse in this way at all.
QIs float still necessary in modern layouts?
AFor layout, basically no: Flexbox and Grid have fully replaced float for multi-column and horizontal arrangements, offering more control with no float-clearing burden. float now serves its original purpose of wrapping text around images, like newspaper typography. If you just need items side by side in a new project, prefer flex, and reserve float for the rare cases where text should flow around a shape.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
clear (Float Clearing)
Learn how to keep elements from being affected by floats.
Flexbox Layout
The modern layout alternative to float.
