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

Posted by Zac Smith
Zac Smith
1,213 Points

How does the css "clear" work?

In "Responsive Web Design and Testing" we build a grid and have to use the clear feature in CSS. Can someone explain exactly how the clear feature works? The Treehouse is great for reviewing things, but sometimes they don't explain how everything works. I just wanted to see if anyone could explain it for me. Thanks.

3 Answers

Katrice Kubota-Teruya
Katrice Kubota-Teruya
Courses Plus Student 1,261 Points

Not a direct answer, but you can probably figure out all you need from reading this post:

http://css-tricks.com/almanac/properties/c/clear/

This site is an extremely helpful resource for anyone learning CSS.

Zac Smith
Zac Smith
1,213 Points

Thank you very much :) This makes it a little more clear. Hopefully with some practice it will become clearer to me.

Ricky Catron
Ricky Catron
13,023 Points
Ricky Catron
Ricky Catron
13,023 Points

"The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.

The clear property applies to both floating and non-floating elements.

When applied to non-floating blocks, it moves the border edge of the element down until it is below the margin edge of all relevant floats. This movement (when it happens) causes margin collapsing not to occur.

When applied to floating elements, it moves the margin edge of the element below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.

The floats that are relevant to be cleared are the earlier floats within the same block formatting context."

I got this from https://developer.mozilla.org/en-US/docs/Web/CSS/clear I just googled MDN(Mozilla developer network) clear.

Zac Smith
Zac Smith
1,213 Points

Thank you for your answer. This part on that link made it most clear to me.

Values

none The element is not moved down to clear past floating elements. left The element is moved down to clear past left floats. right The element is moved down to clear past right floats. both The element is moved down to clear past both left and right floats.

Ricky Catron
Ricky Catron
13,023 Points
Ricky Catron
Ricky Catron
13,023 Points

The Mozilla Developer network is a great place to look up the documentation! It can tell you everything about an element and its attributes. Happy learning.

Logan R
Logan R
22,989 Points
Logan R
Logan R
22,989 Points

The clear command in css has 4 options: clear: left; clear: right; clear: both; clear: none;.

Say you did clear: left to your <p>. If there are any elements to the left of the <p>, then the <p> will automatically drop down the right below any elements left of it. If you have <img><p> and both float left, but you want the <p> to appear below the <img>, you would apply clear: left to the <p>.

I hope that sorta kinda makes sense. I am sure a few more people will also reply with different explanations, making it clear: both to you :)