Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations The Box Model Floats

Zach Saul
Zach Saul
11,156 Points

Confused about floats, and clears.

If a "float" is what shifts an element to one side of a containing element (often a DIV), then I'm not sure i understand why 'clearing' (disallowing floated elements on one side of a containing element), wouldn't revert the placement of you images and paragraphs to the way they were before you floated them.

Perhaps it's the relationship between "float" and "clear" i don't understand, but why wouldn't you want to insert a value of "both" for the "clear" property all the time? It would seem to me this would just force the div to properly contain all your content on all sides.

2 Answers

As for why you don't want to use clear: both all the time, there are often situations where doing so would break your design. I'm not sure I'm interpreting your example correctly, but with a div containing floated elements, a clear could be used to prevent one or more of those elements from floating up next to another. However, it does not directly determine how the parent div will hold all your content.

Check out this guide to floats, which may help you to better understand what floats and clears are and how they are related to one another.

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Hi Zach Saul,

You also might want to take the CSS Layout Techniques course. It shows you how to use floats and clears in a website project.