float
float removes an element from normal flow and places it to the left or right of its container, allowing other content to wrap around it. Originally designed for wrapping text around images, floats became the primary layout method before flexbox and grid were available. Modern CSS prefers flexbox and grid for layout, but understanding floats is still important for legacy code and for specific text-wrapping scenarios.
How float works
/* Float removes element from normal flow */
float: left; /* element floats to the left */
float: right; /* element floats to the right */
float: none; /* default, element in normal flow */
<!-- Example: image floating with text wrapping -->
<img class="float-left" src="image.jpg" alt="Image">
<p>Text flows around the floated image...</p>
.float-left {
float: left;
width: 200px;
margin: 0 20px 20px 0; /* space around image */
}
/* Result */
[Image] Text flows around the floated
element, wrapping naturally.
More text continues here.
<!-- Floated element is removed from normal flow -->
<!-- But text can wrap around it -->
<!-- Height of floated element affects line height of text -->Float properties
Value | Behavior |
|---|---|
| Float to the left, text wraps on the right |
| Float to the right, text wraps on the left |
| Default, not floated, in normal flow |
| Float to the start of the text direction |
| Float to the end of the text direction |
/* Float left */
img {
float: left;
width: 200px;
margin-right: 20px;
}
<!-- Text wraps on right -->
[Image] Text on the right
More text...
<!-- Float right -->
img {
float: right;
width: 200px;
margin-left: 20px;
}
<!-- Text wraps on left -->
Text on the left [Image]
More text...
<!-- Multiple floated elements -->
<div class="box float-left">Box 1</div>
<div class="box float-left">Box 2</div>
<p>Text below floats...</p>
.box {
float: left;
width: 200px;
margin-right: 10px;
}
<!-- Result -->
[Box 1] [Box 2] Text starts below
when boxes fill widthFloat removes elements from normal flow
Floated elements are partially removed from the normal flow. They don't take up space in block layout, but they affect line boxes and allow text to wrap around them.
<!-- Float affects text, not block elements -->
<div class="image-float">Image</div>
<div class="block">Block below</div>
.image-float {
float: left;
width: 100px;
height: 100px;
}
.block {
/* Block element ignores floated element */
/* unless overflow is handled */
}
<!-- Result -->
[Float] [Block covers entire width]
Block starts at top, overlaps float
<!-- Text would wrap, but block element doesn't -->
<!-- This is why blocks need clear or overflow -->Float and width/height
Floated elements can have explicit width and height, and they shrink to their content if width is not specified.
/* Floated element without explicit width */
.float-shrink {
float: left;
/* Width not set, element shrinks to content */
}
<!-- Result -->
[Floated text content]
Text wraps around this minimal-width float.
/* Floated element with explicit width */
.float-sized {
float: left;
width: 200px; /* explicit width */
height: 100px; /* height also works */
}
<!-- Result -->
[200px float] Text wraps in space
to the right of floatFloating multiple elements side-by-side
Before flexbox and grid, floats were used to create multi-column layouts. Float each element left with a width less than 100%, and they line up horizontally.
<!-- Three columns using float (legacy approach) -->
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
.column {
float: left;
width: 33.333%;
box-sizing: border-box; /* important for padding/border */
padding: 10px;
}
<!-- Result -->
[Col 1] [Col 2] [Col 3]
<!-- Two-column layout -->
.sidebar {
float: right;
width: 250px;
}
.content {
margin-right: 270px; /* space for sidebar */
}
<!-- Result -->
[Main content area] [Sidebar]
<!-- Modern alternative: flexbox -->
.container {
display: flex;
gap: 10px;
}
.column {
flex: 1; /* equal width columns */
}
/* Flexbox is cleaner and more flexible */Practical float uses
<!-- Image with text wrapping -->
<figure class="figure-left">
<img src="photo.jpg" alt="Photo">
<figcaption>Photo caption</figcaption>
</figure>
<article>
<p>Article text flows around the image...</p>
</article>
.figure-left {
float: left;
width: 300px;
margin: 0 20px 20px 0;
}
.figure-left img {
width: 100%;
height: auto;
}
<!-- Profile card with image and text -->
<div class="profile">
<img class="profile-image" src="avatar.jpg">
<h3>Name</h3>
<p>Bio text flows around image...</p>
</div>
.profile-image {
float: left;
width: 80px;
height: 80px;
margin-right: 15px;
border-radius: 50%;
}
<!-- Testimonial with quote mark -->
<blockquote class="testimonial">
<span class="quote-mark">"</span>
<p>Quote text flows around large quote mark...</p>
</blockquote>
.quote-mark {
float: left;
font-size: 4em;
line-height: 1;
margin-right: 5px;
}Float collapse and containing blocks
A key issue with floats: a parent container with only floated children has zero height, because floats are removed from normal flow. This is called "float collapse."
<!-- Float collapse -->
<div class="container">
<div class="float">Floated</div>
</div>
.container {
/* Only child is floated, so height is 0 */
background: blue; /* appears as thin line */
}
.float {
float: left;
width: 200px;
height: 100px; /* doesn't affect container height */
}
<!-- Solutions -->
<!-- Solution 1: clearfix hack (legacy) -->
.container::after {
content: '';
display: table;
clear: both;
}
<!-- Solution 2: overflow: auto/hidden -->
.container {
overflow: auto; /* establishes new block formatting context */
}
<!-- Solution 3: use flexbox/grid instead (modern) -->
.container {
display: flex;
/* children don't need to float */
}