Which modern layout approaches avoid clearfix hacks entirely?

• A. Inline-block and floats
• B. Table display
• C. Flow-root with overflow
• D. Flex and Grid layouts

Answer: (D)

When you float elements, they’re taken out of normal flow, so the container’s height can collapse unless you clear the floats. Modern layout systems avoid that whole issue by not relying on floats at all. Flexbox and CSS Grid establish their own formatting contexts and handle the arrangement of their children within the container, so the container naturally wraps around its content without any extra clearfix hacks. That’s why they’re the best answer for eliminating the need to clear floats. Other options still involve floats or their quirks—inline-block has spacing and alignment quirks, and floats require clearing to contain the parent—while display: table uses a different model and isn’t as flexible for modern responsive layouts.