CSS Layout
CSS Float
The CSS Float property is used to position an element to the left or right side of its container, allowing surrounding content to wrap around it.
Float was traditionally used for creating page layouts before Flexbox and Grid became popular. The supporting concepts are explained in Normal Flow and Multi-column Layout.
Today, it is commonly used for:
- Wrapping text around images
- Simple content alignment
- Legacy website maintenance
Syntax
CSS Float Syntax
css
selector {
float: value;
}CSS Float Example
css
img {
float: right;
}This places the <img> on the right side and allows text to wrap around it.
Attributes
| Value | Description | Example |
|---|---|---|
| left | Floats the element to the left | float: left; |
| right | Floats the element to the right | float: right; |
| none | Default value, no floating | float: none; |
| inherit | Inherits float value from parent | float: inherit; |
| clear | Stops floating behavior | clear: both; |
Example
CSS Float Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>CSS Float Example</title>
<style>
img {
float: left;
margin-right: 15px;
}
.clear-box {
clear: both;
background-color: lightgray;
padding: 10px;
margin-top: 20px;
}
</style>
</head>
<body>
<img src="https://ik.imagekit.io/html5andcss3/frontend-media/html_example.webp" alt="Sample Image" width="150">
<p>
This text wraps around the floated image. The image is positioned
on the left side, and the paragraph content flows around it.
This behavior is commonly used in articles and blogs.
</p>
<div class="clear-box">
This content appears below the floated element because of clear: both.
</div>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| float | 1 | 12 | 1 | 1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
Notes
- Floated elements are removed from the normal document flow.
- Text and inline content can wrap around floated elements.
- Use
clearto prevent elements from wrapping around floats. - Modern layouts generally use
FlexboxandCSS Grid. - Float is still useful for wrapping text around images.
Common Float Values
| Value | Result |
|---|---|
| left | Element moves to the left |
| right | Element moves to the right |
| none | Default positioning |
| clear: left | Clears left floats |
| clear: right | Clears right floats |
| clear: both | Clears all floats |
Conclusion
The CSS Float property allows elements to be positioned on the left or right side of a container while letting surrounding content flow around them. Although modern layouts now rely on Flexbox and Grid, understanding float remains important for text wrapping and maintaining older websites.