CSS Advanced Topics

The float property removes an element from the normal document flow and pushes it to the left or right of its container, allowing subsequent inline content to wrap around it.

img {
  float: left;
  margin: 0 1rem 1rem 0;
}

This is the classic use case: wrapping text around an image, like in a newspaper or magazine layout. That remains its most appropriate use.

Values: left, right, none (default), inline-start, inline-end (logical values for RTL support).

The clearfix problem — floated elements are taken out of flow, so their parent container collapses and doesn't grow to contain them. The historical solution was the "clearfix" hack: a pseudo-element with clear: both added after the floated content.

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

The modern alternative is display: flow-root on the container, which creates a new block formatting context and automatically contains floats:

.container { display: flow-root; }

When to use float in 2026:

• Wrapping text around an image (float: left/right on the image inside a text block) — this is still the correct semantic tool for this specific layout.
• Some print stylesheet layouts.

When not to use float:

• Multi-column layouts — use Flexbox or Grid.
• Horizontal navigation bars — use Flexbox.
• Any general layout purpose — Flexbox and Grid are more predictable, require less hackery around clearing, and support alignment features float cannot replicate.

Interviewers may ask about float to test knowledge of CSS history. The correct answer is: you understand it, you know its original purpose, but you default to Flexbox or Grid for layout and only reach for float when wrapping text around content.

z-index controls the stacking order of positioned elements — which one appears in front when elements overlap. Higher values appear on top of lower values.

.modal { position: fixed; z-index: 1000; }
.overlay { position: fixed; z-index: 999; }
.tooltip { position: absolute; z-index: 100; }

Critical constraint: z-index only works on positioned elements. An element must have position set to relative, absolute, fixed, or sticky (anything other than the default static) for z-index to have any effect. Setting z-index: 9999 on a position: static element does nothing.

Stacking contexts are the key concept interviewers probe. A stacking context is an independent compositing layer. Elements inside a stacking context are stacked relative to each other, and the entire context is then stacked as a unit against other stacking contexts.

A new stacking context is created by:

• An element with position other than static and a z-index value other than auto
• opacity less than 1
• transform, filter, clip-path, perspective, will-change
• isolation: isolate — explicitly creates a stacking context without other side effects
• Flex and grid children with z-index other than auto

The classic gotcha: you set z-index: 9999 on a modal but it still appears behind another element. The reason is almost always that one of the ancestors creates a stacking context with a lower z-index — the modal is correctly stacked within its own context, but the whole context is rendered below the other element's context. The fix is either to move the modal higher in the DOM (closer to `) or to useisolation: isolate` and control the containing stacking context.

isolation: isolate — a property specifically for creating a stacking context without other visual side effects. Useful in component libraries to prevent a component's internal z-index values from leaking out and conflicting with the host page.

Tools like browser DevTools' "layers" view can visualize stacking contexts when debugging z-index issues.

The visibility property controls whether an element is visually rendered, while preserving (or not preserving) its space in the layout. The display property controls whether the element participates in layout at all.

visibility values:

• visible (default) — element is rendered normally.
• hidden — element is invisible but still occupies its space in the layout. Other elements position themselves as if the hidden element were there. The element remains in the DOM and the accessibility tree.
• collapse — for table rows and columns: removes them from the layout without affecting the table's column widths. Behaves like hidden on non-table elements.

display: none — the element is removed from the rendering tree entirely. It takes up no space, is not accessible to screen readers, and cannot receive focus. The page reflows as if the element doesn't exist.

Comparison:

The child override behavior is a useful gotcha: a parent with visibility: hidden can have a specific child made visible again with visibility: visible. No equivalent exists for display: none.

opacity: 0 is a third option: the element is invisible but takes up space and remains interactive (clickable, focusable). This is usually undesirable unless combined with pointer-events: none and tabindex="-1".

Animation: visibility can be transitioned alongside opacity to create fade-in/out effects that also remove the element from interaction after it disappears:

.tooltip {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
.tooltip.is-visible {
  opacity: 1;
  visibility: visible;
}

This pattern is common in accessible tooltip and modal implementations because display: none cannot be transitioned directly (though @starting-style in modern CSS partially addresses this).