CORE CONCEPTS

CORE CONCEPTS

New

The Box Model

The Box Model

New

1:54

Intro to Web Layout

Intro to Web Layout

New

2:27

Display Settings

Display Settings

New

2:54

Padding & Margin

Padding & Margin

New

2:48

Width & Height Units

Width & Height Units

New

3:59

Floats & Clears

Floats & Clears

New

1:52

Flexbox & Grid

Flexbox & Grid

New

Intro to Flexbox

Intro to Flexbox

New

2:27

Centering Elements with Flexbox

Centering Elements with Flexbox

New

1:20

Equal Height Layouts with Flexbox

Equal Height Layouts with Flexbox

New

1:47

Grid layouts overview

Grid layouts overview

New

4:18

Flexbox vs. Grid

Flexbox vs. Grid

New

4:00

Advanced Layout

Advanced Layout

New

Positioning Overview

Positioning Overview

New

1:48

Relative Positioning

Relative Positioning

New

1:43

Absolute Positioning

Absolute Positioning

New

1:43

Fixed Positioning

Fixed Positioning

New

1:27

Z-Index

Z-Index

New

1:49

Overflow

Overflow

New

1:49

new course
CSS grid landing page tutorial (36min)

Lesson info

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.

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets

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.