float
Moves an element to the left or right edge, and text wraps around it on the other side.
- Initial value
none- Inherited
- No
- Animatable
- no
- Applies to
- all elements, with no effect on absolutely positioned elements or flex and grid items
- JavaScript
element.style.cssFloat = "left"
Example
#.article img {
float: right;
width: 40%;
margin: 0 0 12px 16px;
border-radius: 12px;
}<div class="article" style="display: flow-root;">
<img src="/collections/covers/darmowa-nauka-programowania.webp" alt="" width="240" height="160">
<p style="margin-top: 0">Libraries are a great place to study: quiet, access to books, and free Wi-Fi. Many people start their first programming courses there.</p>
<p>The image on the right is wrapped by the text thanks to the float property.</p>
</div>Definition and usage
#The float property takes an element out of the normal flow and pushes it to the left or right edge of its parent. Text and inline elements then wrap around it, like in a newspaper.
Entire column layouts used to be built on float. Today Flexbox and Grid handle that, and float has returned to its original role: an image or quote within article text that the text wraps around.
A parent that contains only floated elements "collapses" to zero height. display: flow-root on the parent fixes this, as does the clear property on the element after it.
Syntax
#float: none | left | right | inline-start | inline-end;Values
#- The element doesn’t float and sits in the normal flow above the text.
- The element sticks to the left edge, and text flows on the right.
- The element sticks to the right edge, and text flows on the left.
- The start edge of the line: left in left-to-right languages, right in right-to-left ones.
Values in practice
#none
.demo { float: none; }left
.demo { float: left; }right
.demo { float: right; margin: 4px 0 4px 12px; }inline-start
.demo { float: inline-start; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Use Flexbox or Grid for column layouts. Leave float for images within text.
- Add
display: flow-rootto the parent of floated elements, so it doesn’t collapse to zero.
Related entries
#Spotted a mistake or missing an example? Write to us.