Float and Clear Techniques

Introduction to Float

The float property is one of the earliest CSS layout mechanisms still in use today. While modern layout techniques like Flexbox and Grid have largely superseded floats for complex layouts, understanding float is essential for CSS mastery.

Think of floating elements like placing a cork in water—they rise to the surface and other content flows around them. Just as objects in a river will flow around a boulder, text and inline elements will wrap around floated elements.

"Float was never intended to be a layout mechanism for entire pages, but developers ingeniously adapted it for that purpose before better tools came along."

graph LR A[float property] --> B[float: left] A --> C[float: right] A --> D[float: none] B --> B1[Element floats to the left] C --> C1[Element floats to the right] D --> D1[Element does not float] B1 --> E[Content flows around] C1 --> E E --> F[Parent container issues] F --> G[Requires clearfix]

The Float Property

Basic Float Values

float: none

The default value. The element does not float and displays where it normally would in the document flow.

float: left

The element floats to the left of its container. Text and inline elements will wrap around it on its right side.

float: right

The element floats to the right of its container. Text and inline elements will wrap around it on its left side.

/* Basic float examples */
.float-left {
  float: left;
  margin-right: 15px; /* Provides space between the floated element and the text */
}

.float-right {
  float: right;
  margin-left: 15px; /* Provides space between the floated element and the text */
}

.no-float {
  float: none; /* Default behavior */
}

float: left

This is a paragraph with text flowing around a left-floated element. Notice how the text wraps around the blue box. The box has been taken out of the normal document flow and positioned to the left, allowing content to fill the available space to its right. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

float: right

This is a paragraph with text flowing around a right-floated element. Notice how the text wraps around the red box. The box has been taken out of the normal document flow and positioned to the right, allowing content to fill the available space to its left. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

float: none

This is a paragraph with a non-floated element above it. There's no text wrapping because the box is in the normal document flow. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Behavior of Floated Elements

When you float an element, several important things happen:

Removed from document flow: The element is partially removed from the normal document flow
Block formatting context: The element generates a block formatting context, behaving like a block element regardless of its original display value
Width adjustment: If no width is specified, the element shrinks to fit its content (unlike regular block elements)
Content wrapping: Other content flows around the floated element
Stacking order: Floated elements appear in front of non-floated block-level elements but behind the content of non-floated inline elements
Container impact: Floated elements don't contribute to the height of their parent unless cleared

Real-World Uses of Float

Text Wrapping Around Images

This is the most common and appropriate use of float. Magazine-style layouts often float images to allow text to flow around them naturally. This creates more interesting and engaging layouts than simply stacking content vertically. Many blog posts and news articles still use this technique today.

Pull Quotes

"Float is ideal for pull quotes in articles."

Another classic publishing layout technique is the pull quote, which highlights important text from an article. Floating pull quotes to the left or right allows them to stand out while letting the main text continue flowing, creating professional, magazine-like layouts on the web.

The Clear Property

The clear property specifies whether an element can be positioned next to floating elements or must be moved down (cleared) below them. It's essential for managing the flow of content around floated elements.

Clear Values

clear: none

Default value. The element is not moved down to clear past floating elements.

clear: left

The element is moved down to clear past left-floated elements.

clear: right

The element is moved down to clear past right-floated elements.

clear: both

The element is moved down to clear past both left and right-floated elements. This is the most commonly used value.

/* Basic clear examples */
.clear-left {
  clear: left;
}

.clear-right {
  clear: right;
}

.clear-both {
  clear: both; /* Most commonly used */
}

float: left

float: right

This paragraph flows around both floated elements. Notice how the text wraps between them. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This paragraph has clear: left, so it clears the left-floating element but still wraps around the right-floating element.

This paragraph has clear: right, so it clears the right-floating element but is still affected by the left-floating element.

This paragraph has clear: both, so it clears both floating elements and starts below them.

The Container Collapse Problem

One of the most infamous issues with floated elements is the "container collapse" problem. When a container holds only floated elements, it collapses to zero height because floated elements are taken out of the normal document flow.

The Problem

Floated element

Notice how the container above (with dashed border) appears to have no height. This is because all of its child elements are floated, removing them from the normal document flow. The container doesn't "see" its children, so it collapses to zero height (except for padding).

Solutions to Container Collapse

1. The Clearfix Hack

The most common solution is the "clearfix" hack — a technique that forces a container to recognize the height of its floated children.

/* Modern clearfix with ::after pseudo-element */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Alternative method */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

Floated element

The container above properly contains its floated children thanks to the clearfix technique (implemented here with display: flow-root).

2. Adding a Clearing Element

Another approach is to add an empty element at the end of the container and clear it:

<div class="container">
  <div class="float-left">Floated element</div>
  <div class="float-left">Floated element</div>
  <div style="clear: both;"></div> <!-- Clearing element -->
</div>

3. Modern Solution: display: flow-root

The modern and cleanest solution is to use display: flow-root on the container:

/* Modern solution - creates a block formatting context */
.container {
  display: flow-root;
}

This creates a block formatting context that causes the container to contain all floated descendants without using hacks.

4. Using overflow Property

Setting overflow to a value other than visible will also create a block formatting context:

/* Using overflow to clear floats */
.container {
  overflow: auto; /* or hidden, but be careful with this */
}

This approach works but can have unintended side effects if content needs to visually overflow the container.

Classic Float-Based Layouts

Before Flexbox and Grid, web developers used floats extensively to create multi-column layouts. Understanding these patterns helps you maintain legacy code and appreciate the evolution of CSS.

Simple Two-Column Layout

/* Simple two-column layout */
.container {
  display: flow-root; /* Modern clearfix */
}

.sidebar {
  float: left;
  width: 25%;
}

.main-content {
  float: right;
  width: 70%;
}

/* Traditional clearfix for older browsers */
.container::after {
  content: "";
  display: table;
  clear: both;
}

Sidebar

Navigation links and supplementary content would go here.

Main Content

The primary content of the page would go here. This is where you'd place your articles, product descriptions, or other main information.

In a real website, this area would typically be much longer than the sidebar.

Three-Column Layout

/* Three-column layout */
.container {
  display: flow-root;
}

.column {
  float: left;
  width: 31.33%;
  margin-right: 3%;
}

.column:last-child {
  margin-right: 0; /* Remove margin from the last column */
}

Column 1

Content for the first column would go here.

Column 2

Content for the second column would go here.

Column 3

Content for the third column would go here.

Float-Based Grid System

Many CSS frameworks (like early versions of Bootstrap) used a 12-column float-based grid system:

/* Simple 12-column grid system */
.row {
  display: flow-root;
  margin: 0 -15px; /* Negative margin to offset column padding */
}

[class*="col-"] {
  float: left;
  padding: 0 15px;
  box-sizing: border-box;
}

.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }

col-12

col-6

col-4

col-3

Practical Float Techniques

Equal-Height Columns (The Float Challenge)

One of the biggest challenges with float-based layouts was creating equal-height columns. There were several workarounds:

/* Equal-height columns with a faux column technique */
.container {
  background: url('column-bg.png') repeat-y; /* Background image that creates the illusion of columns */
  display: flow-root;
}

.column {
  float: left;
  width: 50%;
}

Text Wrapping Techniques

/* Preventing text from wrapping around a floated element */
.no-wrap {
  clear: both; /* Clears both left and right floats */
}

/* Creating a text wrap break */
.wrapper {
  display: flow-root; /* Creates a new formatting context */
}

/* Drop cap effect using float */
.drop-cap {
  float: left;
  font-size: 3em;
  line-height: 0.8;
  margin-right: 0.2em;
}

Drop caps are a classic typographic technique used to signal the start of a new section or article. By floating the first letter, we can create this elegant magazine-style effect easily with CSS. The rest of the text naturally wraps around the larger letter, creating a professional look with minimal code.

Float for Image Galleries

/* Simple image gallery with floats */
.gallery {
  display: flow-root;
}

.gallery-item {
  float: left;
  width: 25%;
  padding: 10px;
  box-sizing: border-box;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

Image 1

Image 2

Image 3

Image 4

Float in Modern CSS

When to Still Use Float Today

Text wrapping around images: The original and still valid use case

This is still the most appropriate use of float in modern web design. When you want text to naturally flow around an image in a document-like layout, float remains the best tool for the job. Notice how the text wraps around the image exactly as you'd see in a magazine or newspaper.
Pull quotes and asides: For highlighted content within text

Using float for pull quotes and asides remains an excellent design pattern.

In article layouts, floating pull quotes, highlights, or sidebar content is still a valid use case. This creates engaging visual breaks in long-form content while maintaining the natural reading flow. These design patterns are common in digital magazines and long-form publishing websites.

After the aside, we use clear: right to ensure the following content appears below it.
Small UI elements: Like icons that text should wrap around
Maintaining legacy code: Understanding floats is essential for working with older websites

Modern Alternatives to Float

Flexbox

For one-dimensional layouts (rows or columns), Flexbox provides much better control:

/* Instead of float-based columns */
.float-columns {
  display: flow-root;
}
.float-column {
  float: left;
  width: 33.33%;
}

/* Modern flexbox approach */
.flex-container {
  display: flex;
}
.flex-column {
  flex: 1;
}

Flex Item 1

Flex Item 2

Flex Item 3

CSS Grid

For two-dimensional layouts (rows and columns simultaneously), CSS Grid is ideal:

/* Instead of float-based grid */
.float-grid {
  display: flow-root;
}
.float-item {
  float: left;
  width: 25%;
}

/* Modern grid approach */
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

Grid Item 1

Grid Item 2

Grid Item 3

Grid Item 4

Text Wrapping with shape-outside

For advanced text wrapping around complex shapes, the shape-outside property extends the capabilities of float:

/* Advanced shape-based text wrapping */
.shape-image {
  float: left;
  width: 150px;
  height: 150px;
  margin-right: 15px;
  shape-outside: circle(50%); /* Text flows around a circle */
}

/* Other shape functions include: 
   - ellipse()
   - polygon()
   - inset()
   - url() (to use alpha channel of an image) */

Note: shape-outside only works with floated elements, so it's a modern extension of float rather than a replacement.

Common Float Problems and Solutions

Issue: Elements Next to Floats Are Misaligned

Non-floated block elements won't wrap around floats, but their backgrounds and borders will still take up full width, creating visual inconsistencies.

Floated Element

This block element's text wraps around the float, but its background and border extend to the full width of the container.

Solution:

Convert the adjacent element to also use float
Or, use display: flow-root on the adjacent element to create a new formatting context
Or, use overflow: hidden on the adjacent element

/* Solution with overflow */
.adjacent-content {
  overflow: hidden; /* Creates a block formatting context */
}

/* Alternative with flow-root */
.adjacent-content {
  display: flow-root;
}

Floated Element

This block element has overflow: hidden, which creates a new block formatting context. Now both the text and the background/border adapt to the float.

Issue: Margins Don't Work as Expected with Floats

Margins of floated elements don't collapse with other margins, which can cause unexpected spacing.

Solution:

Be explicit with margins on floated elements
Use box-sizing: border-box to make width calculations easier

/* Predictable dimensions with floats */
* {
  box-sizing: border-box; /* Include padding and border in the element's width and height */
}

.float-item {
  float: left;
  width: 50%;
  padding: 15px;
}

Issue: Float Layouts Breaking at Different Screen Sizes

Float layouts can break when the screen size changes if elements have fixed widths or if content sizes vary significantly.

Solution:

Use percentage-based widths instead of fixed widths
Clear floats at specific breakpoints with media queries
Switch to Flexbox or Grid for more complex responsive layouts

/* Responsive float layout */
.column {
  float: left;
  width: 50%;
  padding: 15px;
  box-sizing: border-box;
}

/* At smaller screens, stack the columns */
@media (max-width: 768px) {
  .column {
    float: none;
    width: 100%;
  }
}

Practice Exercises

Exercise 1: Text and Image Layout

Create a blog post layout with:

A header with a title
A main image floated to the left with text wrapping around it
A pull quote floated to the right in the middle of the article
A sidebar floated to the right containing "related articles"
Proper clearing to ensure all elements display correctly

Use appropriate margins to create proper spacing between elements.

Exercise 2: Photo Gallery

Create a responsive photo gallery with:

A container with proper clearfix
Gallery items floated to create a grid (4 items per row on desktop)
Media queries to change the layout at different screen sizes:
- 4 items per row on large screens
- 3 items per row on medium screens
- 2 items per row on small screens
- 1 item per row on very small screens
Add padding, borders, and hover effects to enhance the gallery appearance

Exercise 3: Legacy-Style Layout

Create a three-column website layout using floats:

A header spanning the full width
A navigation sidebar floated to the left (20% width)
Main content in the middle (60% width)
A widgets sidebar floated to the right (20% width)
A footer spanning the full width
Use proper clearfix techniques
Make it responsive by stacking all columns at smaller screen sizes

Then, as a bonus challenge, recreate the same layout using:

Flexbox
CSS Grid

Compare the three approaches and note the differences in complexity and flexibility.

Exercise 4: Debugging Floats

Fix the following float-related issues in a provided HTML/CSS file:

A container with floated elements that's collapsing
Content that should wrap around a floated element but isn't behaving correctly
A float-based layout that's breaking at smaller screen sizes
Elements next to floats that have misaligned backgrounds

Apply the techniques learned in this lecture to solve each problem.

Summary and Key Takeaways

Float Basics: The float property takes elements out of the normal document flow and allows content to wrap around them.
Clear Property: The clear property controls whether elements should move below floated elements.
Container Collapse: Floated elements don't contribute to their container's height, leading to the container collapse problem.
Clearfix Solutions: Various techniques to fix the container collapse issue, with display: flow-root being the modern approach.
Classic Float Layouts: Float-based techniques for creating multi-column layouts that were industry standard before Flexbox and Grid.
Modern Usage: While Flexbox and Grid are better for layout, float remains useful for text wrapping around images and pull quotes.
Common Problems: Understanding and addressing typical float-related challenges helps maintain legacy code and implement float-based designs correctly.

Further Learning

MDN Web Docs: The float property
MDN Web Docs: The clear property
CSS-Tricks: All About Floats
CSS-Tricks: Clearfix: A Lesson in Web Development Evolution
Smashing Magazine: Dealing With Legacy Code In A Responsive World