Historically, float was the primary tool for building multi-column page layouts before flexbox and grid existed, but today it's mainly used for its original, narrower purpose: letting an image or other element sit to one side while text wraps naturally around it, similar to how images are placed in a printed magazine or newspaper column. A floated element is taken out of normal document flow, which can cause its parent container to collapse to zero height if all of that parent's children are floated, since the parent no longer sees any in-flow content to size itself against, a classic float-related bug typically fixed with a clearfix technique or by giving the parent a modern layout context like display: flow-root.
1Understanding Float
Historically, float was the primary tool for building multi-column page layouts before flexbox and grid existed, but today it's mainly used for its original, narrower purpose: letting an image or other element sit to one side while text wraps naturally around it, similar to how images are placed in a printed magazine or newspaper column. A floated element is taken out of normal document flow, which can cause its parent container to collapse to zero height if all of that parent's children are floated, since the parent no longer sees any in-flow content to size itself against, a classic float-related bug typically fixed with a clearfix technique or by giving the parent a modern layout context like display: flow-root.
For actual page layout, columns, grids, and overall page structure, use flexbox or grid instead of float — float today is best reserved specifically for its original purpose of wrapping text around an image or similarly floated element.
img {
float: left;
margin-right: 16px;
}2Practical Example
Here is a real-world application of Float showing how it is used in production CSS code.
.parent {
/* no explicit height or layout context */
}
.child-one, .child-two {
float: left;
}3Best Practices
Follow these guidelines when working with Float:
1. Reserve float specifically for wrapping text around an image or similar element, rather than for building overall page layout, which flexbox or grid handle far more reliably today
2. Apply display: flow-root, or a clearfix technique, to a parent container whose height is collapsing because all of its children are floated
3. Use the clear property on an element that should stop wrapping and instead move below a preceding floated element entirely
Tip: For actual page layout, columns, grids, and overall page structure, use flexbox or grid instead of float — float today is best reserved specifically for its original purpose of wrapping text around an image or similarly floated element.
img {
float: left;
margin-right: 16px;
}