Are floats recommended for layout in modern CSS, and what replaced them?

• A. Yes; replaced by inline-block
• B. No; replaced by grid gaps only
• C. No; replaced by Flexbox and CSS Grid.
• D. Yes; replaced by CSS variables

Answer: (C)

Floats were a workaround from the past for laying out pages, but they pull elements out of normal flow and lead to tricky height issues, clearfix hacks, and unpredictable results as the viewport changes. The modern approach uses layout tools designed for structure: Flexbox for one-dimensional layouts and CSS Grid for two-dimensional layouts. Flexbox makes it easy to align items in a row or column, control spacing, wrapping, and even the visual order for different screen sizes. CSS Grid lets you define rows and columns and place items precisely, again with strong responsive behavior. Together, they cover most layout needs far more reliably than floats ever did, so floats aren’t the recommended method anymore.

As for the other options: inline-block isn’t the ideal replacement because it still suffers from whitespace gaps and alignment quirks and doesn’t offer the robust two-dimensional control you get with Grid. Saying the replacement is just about grid gaps overlooks the broader layout capabilities of Flexbox and Grid. And CSS variables don’t replace layout techniques at all—they’re for reusable values and design tokens, not for structuring page layouts.