Lesson info

Floats are great for wrapping text around an element, such as an image in a magazine layout. Floating multiple elements arrays them side by side horizontally. Clearing an element ensures it won't wrap around a floating element. In this video, we'll show you to use floats and clears in Webflow — and suggest a better method to achieve the same results: flexbox.

Assets

Want to follow along with this lesson? Fortunately, we created a zip file which contains all the assets used in the project, and we've included that link 

right here
.

Transcript

Float was originally intended to help us wrap text content around an element. And since that time (the first appearance of Float, of course, dating back to General Washington), it's been used to make block elements sit next to each other, horizontally. Got two block elements that are 50% wide, float left, and now they’re sitting next to each other. Now that flexbox can accomplish many of these layout tasks more efficiently, we'll cover Float (and Clear) as it relates to what Float does best.

Here's a section with an image and some text content. Keep in mind these are multiple paragraphs — not just one paragraph with lots of breaks in it.

With our image selected, let's go in and set Float to left. And that's it. Video lesson over. Except it isn't. Because our paragraphs are extremely close to the image. How close? 0 pixels. What we can do here is set some margin on our image to push the content away (giving it some breathing room).

And if we resize our viewport, we can see that the text is reflowing around that image. Let's go back and go in and select Float right. Same concept — we can make the same adjustments — this time, the content Floats right. Back to left? Float left.

That's Float. Let's do Clear.

Clear is not applied on the Floated element (known throughout the Valley as the Floatee) but rather one or more elements we don't want wrapping around that Floated element. So if we select this second paragraph and Clear left, we can see that the paragraph doesn’t wrap around the image (regardless of the available space).

What if our image is set to Float right? Good question. Let's just set that same paragraph to Clear right. Same deal here. And Clear both, that'll respect the Clear property regardless of whether our image is Floating left or Floating right.

So, float pushes an element to one side, wrapping text content around it. Clear lets us make sure that another element can Clear the Floatee without wrapping.

Related tutorial

Floats & Clears

1:52