From the course: CSS Layouts: From Float to Flexbox and Grid

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Clearing floats

Clearing floats - CSS Tutorial

From the course: CSS Layouts: From Float to Flexbox and Grid

Start my 1-month free trial

Clearing floats

“

- [Instructor] Elements are floated so other elements will wrap around it. But sometimes we need to be able to have control over which elements will wrap around the floated element. To return the elements back to the normal flow use the clear property with one of the following values, left, right, or both. To decide which element to apply the clear to depends on where you want the layout to return to the normal flow. Let's go back to the CodePen example from the previous lesson. I've already created a class for the clear, also named clear down on line 12. So we can add this to any element. The value is set to both to clear a left or a right float. So let's say I wanted just the first paragraph to wrap around the image, I can apply the clear to the second paragraph, so let's add that to the HTML. Here's my second paragraph. So I'll give it a class of clear, class equals clear in quotes. And now the elements will…

Contents