Element Floating in CSS

You're writing an article about the Pyramid of Cheops and you want the photo to stand at the left edge while the text flows next to it, like in a newspaper. By default, an image sits on its own line and the paragraph starts below it. The float property solves this puzzle.

Element floating is a technique that lets you push an element, for example an image, to the left or right edge of its container while the rest of the content flows around it on the other side. It used to be used for multi-column layouts as well, but today Flexbox and Grid do that job, and float remains mainly for wrapping text around images. The most common values are left, right and none; the newer inline-start and inline-end place the element at the start or the end of the line (in text written from left to right, that means left and right).

Float Values

Here is a brief description of the most common values:

• float: left - the element is pushed as far left as possible in its container, and the other elements flow around it on the right.
• float: right - the element is pushed as far right as possible in its container, and the other elements flow around it on the left.
• float: none - the default value: the element doesn't float but stays in the normal document flow (a block still takes the full width, and an inline element flows in the text). Only the clear property stops an element from standing next to earlier floated elements.

For example, if we have two images, the first set to float: left and the second to float: right, the first one will stand at the left edge, the second at the right edge, and the text will flow between them.

Text Wrapping Around an Image

Let's go back to the article about the pyramid. All you need to do is give the image float: left and a small margin on the right, so the text doesn't stick to the photo:

<img src="pyramid.jpg" alt="Pyramid of Cheops" style="float: left; margin-right: 15px;">
<p>The Pyramid of Cheops is the largest of the pyramids of Giza. The text automatically wraps around the image, creating an aesthetic layout.</p>

The image now stands at the left edge, and the paragraph fills the space to its right. Remember the alt attribute - a description of the image helps everyone who can't see it. Today, floating is used mainly for arranging images and text side by side; sidebars are built with Flexbox or Grid.

The clear Property

The clear property decides whether an element may stand next to earlier floated elements. You can compare it to a stone threshold in a temple: an element with clear won't stand next to the statues placed along the wall, but below them. The value left forbids standing next to elements floated left, right - next to elements floated right, and both - next to either of them.

div {
  clear: both; /* no element will wrap around this div from left or right */
}

A typical example is the footer under an article with a photo. Without clear, the footer could slide up next to the image if the article text is shorter than the photo:

.footer {
  clear: both;
}

Now the footer always starts below the image, even when the paragraph ended earlier.

A Container That "Forgets" the Image

Floating can lead to layout problems when containers don't recognize floating elements as taking up space. If a box with a background contains only a floated image, the box collapses to zero height and the image sticks out of it. The classic solution is a technique called "clearfix": a pseudo-element at the end of the container with the declaration clear: both.

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

Adding the clearfix class to the container of floating elements will ensure proper display. Today you can do the same with a single declaration on the container: display: flow-root;.

.box {
  display: flow-root;
}

A container with display: flow-root wraps its floated children on its own, so you need neither an extra class nor a pseudo-element. You'll still find clearfix in older code, though, so it's worth recognizing it.

Float and Page Layout

If you want to place whole columns, menus or cards side by side, reach for Flexbox, which the next module is all about, or for Grid. These tools were made for building layouts and need no clearfix tricks.

Remember that float shoves an element to the edge of its container and lets the rest of the content flow around it, but the container stops counting that element's height - and this is exactly why clear, clearfix and display: flow-root exist, as barriers that bring your layout back to order.