How do floats work in CSS?

The short answer

The float property takes an element out of the normal document flow and pushes it to the left or right of its container. Surrounding text and inline elements wrap around the floated element. Floats were originally designed for wrapping text around images, but they were widely used for page layouts before flexbox and grid existed.

How it works

Copy
.image {
  float: left;
  margin-right: 16px;
}

Copy
<img class="image" src="photo.jpg" alt="Photo" />
<p>This text wraps around the image on the right side...</p>

The image floats to the left, and the paragraph text flows around it on the right.

The collapsing parent problem

When all children of a container are floated, the container collapses to zero height because floated elements are removed from the normal flow:

Copy
<div class="container">
  <div class="box" style="float: left;">Box 1</div>
  <div class="box" style="float: left;">Box 2</div>
</div>
<!-- container has 0 height! -->

Clearing floats

To fix the collapsed parent, you need to "clear" the floats. The most common approach is the clearfix:

Copy
.container::after {
  content: '';
  display: table;
  clear: both;
}

Other options include overflow: hidden, the clear property on siblings, and the modern display: flow-root.

Floats vs modern layout

Floats are mostly replaced by flexbox and grid for page layouts:

Copy
/* Old way with floats */
.sidebar {
  float: left;
  width: 200px;
}
.main {
  float: left;
  width: calc(100% - 200px);
}
/* Modern way with flexbox */
.container {
  display: flex;
}
.sidebar {
  width: 200px;
}
.main {
  flex: 1;
}

Floats are still useful for their original purpose — wrapping text around images. For everything else, use flexbox or grid.

Why interviewers ask this

This tests your CSS fundamentals and knowledge of how the web evolved. Floats appear in older codebases and understanding them helps you maintain legacy code. Knowing the clearfix hack and why flexbox replaced floats shows practical experience.