CSS Tutorial
CSS Float
The float property pushes an element to one side and lets surrounding content flow around it. It was once the backbone of page layout; today its main job is wrapping text around images, with flexbox and grid handling structure.
The float property
Floating an element takes it out of the normal vertical flow and shoves it to the left or right edge of its container. Inline content that comes after it, such as paragraph text, wraps around the floated element. The classic example is a photo sitting to the left of a caption with the words flowing beside it.
| Value | Effect |
|---|---|
| left | Element floats to the left; content wraps on its right |
| right | Element floats to the right; content wraps on its left |
| none | Default — no floating |
Wrapping text around a box
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: system-ui, sans-serif; padding: 20px; }
.thumb {
float: left;
width: 90px;
height: 90px;
background: #2563eb;
color: white;
margin: 0 14px 6px 0;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="thumb">IMG</div>
<p>This paragraph flows around the floated blue box on its left. As you add more text, the words continue wrapping neatly beside and then below the floated element, which is exactly how magazine-style image captions are built.</p>
</body>
</html>Clearing floats
A floated element is removed from normal flow, so its parent may collapse to zero height and later content may slide up beside it. The clear property forces an element to move below any floats, and the clearfix technique makes a parent wrap its floated children.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: system-ui, sans-serif; padding: 20px; }
.card {
background: #e2e8f0;
padding: 10px;
}
.card::after { /* clearfix */
content: "";
display: block;
clear: both;
}
.pic {
float: left;
width: 70px;
height: 70px;
background: #16a34a;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="card">
<div class="pic"></div>
<p>The clearfix on the grey card makes it wrap this floated green box, so the card keeps its full height.</p>
</div>
</body>
</html>For overall page layout prefer flexbox or grid. Reach for float mainly when you genuinely need text to wrap around an image or figure.
Key points
- float pushes an element left or right and lets content wrap around it.
- Floated elements leave the normal flow, which can collapse the parent's height.
- clear: both moves an element below preceding floats.
- The ::after clearfix makes a container enclose its floated children.