Overflow and Floats

Part 1: overflow

The overflow property controls what happens when an element's content is larger than its container.

1. Overflow Values

Value	Behaviour
visible	(default) Content spills out. Container size unaffected.
hidden	Content is clipped. No scrollbar. Overflow invisible.
clip	Like hidden but also prevents programmatic scrolling via JS.
scroll	Content clipped. Scrollbar always shown (even if not needed).
auto	Scrollbar added only when content overflows. ✅ Most practical.

.sidebar { overflow-y: auto; height: 100vh; }      /* Scrollable sidebar */
.card    { overflow: hidden; border-radius: 12px; } /* Clip image corners inside card */
.code    { overflow-x: auto; white-space: nowrap; } /* Horizontal scroll for code blocks */

2. overflow-x and overflow-y

Control overflow on each axis independently:

.panel { overflow-x: hidden; overflow-y: auto; }  /* Only vertical scroll */
.table-wrapper { overflow-x: auto; }              /* Horizontal scroll for wide tables */

3. text-overflow — Truncating Text

When text overflows and you want to show ... (ellipsis) instead of clipping:

.truncate {
  white-space: nowrap;        /* Prevent text from wrapping to new line */
  overflow: hidden;           /* Hide overflowing text */
  text-overflow: ellipsis;    /* Show '...' at the cut-off point */
}

/* Multi-line truncation (modern CSS) */
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;          /* Show max 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

4. Overflow and Stacking Contexts

overflow: hidden (and overflow: auto) create a new Block Formatting Context (BFC).

Side effects to know:

• Contains floats: Parent won't collapse if children float (see clearfix below).
• Cuts box-shadow and ::after decorations that extend outside the element's bounds.
• Blocks position: sticky: A sticky child inside an overflow: hidden parent will not work — one of the most common WordPress layout bugs.

/* ❌ This breaks sticky-positioned children */
.section { overflow: hidden; }
.sticky-header { position: sticky; top: 0; } /* WON'T STICK */

/* ✅ Fix: use overflow: clip (new) or remove overflow on ancestors */
.section { overflow: clip; } /* Clips visually but doesn't create BFC — sticky works */

---

Part 2: Floats

float is a legacy layout property once used for multi-column layouts. Today it is only appropriate for wrapping text around images — all other layout should use Flexbox or Grid.

5. float Property

img { float: right; margin: 0 0 1rem 1.5rem; }  /* Text wraps around image on left */
img { float: left;  margin: 0 1.5rem 1rem 0; }  /* Text wraps around image on right */

6. clear Property

Stops elements from wrapping next to a floated element:

.next-section { clear: both; }   /* Won't wrap next to float above */
.no-left-wrap { clear: left; }   /* Won't wrap next to left-floated elements */

7. The Collapsed Container Problem

A container with only floated children collapses to zero height because floated elements are taken out of the normal flow:

/* ❌ .gallery collapses to 0 height */
.gallery img { float: left; width: 33%; }

/* ✅ Solution 1: Modern — display: flow-root (creates BFC) */
.gallery { display: flow-root; }

/* ✅ Solution 2: Classic clearfix */
.gallery::after { content: ''; display: table; clear: both; }

/* ✅ Solution 3: overflow: hidden */
.gallery { overflow: hidden; }

8. Float + Text Wrap Example (The Main Use Case)

/* Article with floated pull quote */
.pull-quote {
  float: right;
  width: 280px;
  margin: 0 0 1.5rem 2rem;
  padding: 1.5rem;
  background: var(--color-surface);
  border-left: 4px solid var(--color-primary);
  font-size: 1.25rem;
  font-style: italic;
}

/* Clear after the article so footer isn't affected */
article::after { content: ''; display: table; clear: both; }

9. When to Use Float (vs Not)

Use Case	Recommendation
Multi-column layout	❌ Use CSS Grid
Navigation bar	❌ Use Flexbox
Text wrapping around image	✅ Float is perfect here
Multi-column text (newspaper)	✅ Use columns property instead
Legacy theme maintenance	✅ Match existing float patterns