Syntax
float: left | right | none;
clear: left | right | both;Examples
Wrapping Text Around an Image
The use case float remains genuinely good for today.
img.inline-photo {
float: left;
margin: 0 16px 8px 0;
width: 200px;
}
/* Paragraph text will wrap around the right and bottom of the image */clear to Stop Wrapping
Preventing an element from sitting beside a float.
.footer {
clear: both; /* moves below any floated elements, regardless of side */
}Parameters and values
- float (left | right | none): Pulls an element to one side, letting content wrap around it
- clear (left | right | both | none): Prevents an element from sitting beside floated elements
Best practices
- Use Flexbox or Grid instead of float for building page layouts and component structure - that is what they were designed to replace
- Reserve float genuinely for wrapping text around an image or similar inline content, which is still its best use case today
- Remember a floated element is taken out of normal flow, which can cause its parent to collapse to zero height unless cleared or given overflow: auto
- Avoid float-based grid systems (common in older frameworks) in new projects - modern layout tools are simpler and more capable
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
The Box Model
Every element in CSS is a rectangular box made up of four layers, from innermost to outermost: content, padding, border, and margin. Understanding the box model is fundamental to controlling layout - it explains exactly how much space an element actually occupies and how that space is distributed.box-sizing
box-sizing controls how an element's total width and height are calculated. The default, content-box, means padding and border are added on top of the declared width, making sizing math confusing. border-box includes padding and border within the declared width instead, which is why nearly every modern CSS reset sets it globally.display Property
The display property determines how an element generates boxes and participates in layout. block elements start on a new line and fill available width. inline elements flow within text and ignore width/height. inline-block combines inline flow with block-like sizing control. none removes the element from layout entirely.position Property
The position property controls how an element is positioned in the document. static is the default, following normal flow. relative positions an element relative to its normal position. absolute removes it from flow entirely, positioning it relative to its nearest positioned ancestor. fixed positions relative to the viewport, staying in place during scroll. sticky toggles between relative and fixed based on scroll position.
Every element in CSS is a rectangular box made up of four layers, from innermost to outermost: content, padding, border, and margin. Understanding the box model is fundamental to controlling layout - it explains exactly how much space an element actually occupies and how that space is distributed.box-sizing
box-sizing controls how an element's total width and height are calculated. The default, content-box, means padding and border are added on top of the declared width, making sizing math confusing. border-box includes padding and border within the declared width instead, which is why nearly every modern CSS reset sets it globally.display Property
The display property determines how an element generates boxes and participates in layout. block elements start on a new line and fill available width. inline elements flow within text and ignore width/height. inline-block combines inline flow with block-like sizing control. none removes the element from layout entirely.position Property
The position property controls how an element is positioned in the document. static is the default, following normal flow. relative positions an element relative to its normal position. absolute removes it from flow entirely, positioning it relative to its nearest positioned ancestor. fixed positions relative to the viewport, staying in place during scroll. sticky toggles between relative and fixed based on scroll position.