CSS Float

Before flexbox and grid existed, float was how whole page layouts were built. Today it has a smaller job, but it is still the right tool for one thing: letting text wrap around an image, like in a newspaper. A photo on the left, the article text flowing around it on the right.

Diagram — see how it fits together

When you float an element, it moves to one side of its container and the following content flows around it. The element is taken out of the normal flow — and that causes one famous problem, which this lesson also fixes.

Float left and float right

float: left pushes the element to the left side of its container, and the text wraps around its right side. float: right does the mirror image. The classic example is a picture in an article: float it left, and the paragraph text sits neatly beside it.

.photo {
  float: left;
  width: 140px;
  margin: 0 16px 8px 0;
}

Clear — push below the floats

A floated element keeps pulling the next content up beside it. When you want something to stop wrapping and go back to a full line — a footer, for example — you give it clear: both. It moves down below every floated element, left and right, and starts on a fresh line.

.footer {
  clear: both;
}

The collapsing parent problem

Here is the famous problem. A parent box that contains only floated children collapses to zero height — it acts as if the children are not there at all, because floated elements are out of the normal flow. The parent's background and border shrink to nothing, and the next section slides up underneath the floats.

Clearfix — the standard fix

The standard fix is called a clearfix. You add a tiny invisible element after the floats, using the ::after pseudo-element, and clear it. The parent then stretches to wrap its floated children again. It is three lines of CSS, and you will use it on every float layout.

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Float layout — two columns

With float and clear you can build a simple two-column layout: one column floats left, the other floats right, and the footer clears both. It is the oldest layout trick on the web, and it still works. For new layouts, flexbox and grid are easier — you will meet them later in this course — but float is the tool for wrapping text around images.

Common mistakes

• Forgetting to clear floats, so the footer or the next section slides up beside them.
• Letting the parent collapse to zero height and wondering where its background colour went.
• Floating every element on the page instead of using flexbox or grid for real layouts.
• Forgetting the margin between a floated image and the text wrapping around it.
• Using clear: left when there are also right-floated elements — use clear: both to be safe.

Remember

• float: left and float: right move an element to one side; text wraps around the other side.
• clear: both pushes an element below all floated elements.
• A parent with only floated children collapses to zero height — fix it with the clearfix.
• The clearfix is ::after with content: "", display: table and clear: both.
• Float is best for wrapping text around images; use flexbox or grid for page layouts.

Example explained

• .photo { float: left; width: 140px; margin: 0 16px 8px 0; } — the orange CHAI box floats to the left, and the welcome text wraps around its right side with a 16px gap.
• .clearfix::after { content: ""; display: table; clear: both; } — the clearfix makes the wrapper stretch around its floated children instead of collapsing.
• .menu { float: left; width: 45%; } — the menu column floats to the left side of the page.
• .offers { float: right; width: 45%; } — the offers column floats to the right, so the two columns sit side by side.
• .menu, .offers { box-sizing: border-box; } — the padding is counted inside the 45% width, so the two columns really do fit on one line.
• .footer { clear: both; } — the footer moves below both floated columns and starts on a fresh full-width line.