CSS · Chapter 20 of 44
CSS Float
The float property lets an element be pushed to the left or right, allowing text and inline content to wrap around it — historically used for layouts before flexbox and grid.
Floating elements are removed from normal flow, so parent containers often need clearfix techniques or overflow: hidden to contain them.
Syntax
float: left | right | none;How float works
float: left/right pushes an element to one side, letting surrounding inline content flow around it, like text wrapping around an image.
Clearing floats
clear: both stops an element from wrapping next to floats. Modern layouts prefer flexbox/grid, but float is still used for text-wrap effects.
Example 1 (css)
img {
float: left;
margin-right: 15px;
}Output
An image floats left with text wrapping around its right sideThe float property removes the image from normal flow, letting text wrap beside it.
Key points
- float pushes elements left or right, allowing wrap-around content.
- Floated elements leave normal document flow.
- clear stops elements from sitting beside floats.
- Modern layout tasks are usually better solved with flexbox or grid.
💡 Note: Float-based multi-column layouts have largely been replaced by flexbox and grid.