float and clear
The clear CSS property sets whether an element must be moved below (cleared) floating elements that precede it. The clear property applies to floating and non-floating elements.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
both | 1 | 12 | 1 | 1 | 18 | 1 |
left | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
right | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though still remaining a part of the flow (in contrast to absolute positioning). | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS property | ||||||
left | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
right | 1 | 12 | 1 | 1 | 18 | 1 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
.float-image {
float: left;
margin: 0 1em 1em 0;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}Live demo
Use cases
-
Using float and clear
The clear CSS property sets whether an element must be moved below (cleared) floating elements that precede it.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.