The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. It is commonly used for images, but was historically used for entire layouts.

System Check

What happens to an element when it is floated?

It centers itselfIt is removed from normal flowIt becomes invisibleIt stretches to full width

Community Holo-Net

Share Layouts

Built a complex grid using floats? Share your retro layouts.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

CSS Float & Clear

Pascual Vila

Frontend Instructor.

The float property was originally designed to allow text to wrap around images, mimicking print layout. However, for a long time, it became the primary method for creating multi-column web layouts before Flexbox and Grid arrived.

How Float Works

When an element is floated, it is taken out of the normal document flow and pushed to the far left or right of its container. Text and inline elements will wrap around it.

The Collapse Problem

If a parent element contains only floated children, its height collapses to 0. This happens because the children are removed from the flow, so the parent thinks it's empty. This is a common bug that breaks borders and backgrounds.

Clearing Floats

To fix the collapse, we need to "clear" the float.

Old Way: The "clearfix" hack using a pseudo-element (::after) with clear: both.
Modern Way: Use display: flow-root on the parent container. This creates a new Block Formatting Context (BFC) that contains the floats.

Float & Layout Glossary

float: A CSS property that places an element on the left or right side of its container, allowing text and inline elements to wrap around it.
clear: A CSS property that specifies whether an element can be next to floating elements that precede it or must move down (clear) them.
Clearfix: A CSS technique (hack) used to force a container to expand around its floated children, preventing height collapse.
display: flow-root: A modern CSS value that creates a new block formatting context, effectively containing floats without requiring hacks.

📖 INDEX

Layout Mastery

Concept 1: The Float Property