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

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Christopher Lebbano
Christopher Lebbano
15,338 Points
Posted by Christopher Lebbano
Christopher Lebbano
15,338 Points

Working with Float and Clear to debug an issue.

In this video, Nick uses the clear property to fix a bug. The bug is due to paragraph text wrapping down to a 3rd line in smaller screen resolutions. What I don't understand is how clear works. After a google search, I learned that the clear property will not allow elements to float around the element you attached clear to. My question is, if clear:left on an element will not allow floated elements to the left, why does the images still appear to the left of the element at all? In other words, I would think that clear:left would make that specific element centered on the page without anything else to the left of it ever again. But this isn't the case, the cleared element still has stuff floating around it.

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Elements appear left to right of images by default because images are one of the few inline elements of HTML. If an element is inline then it only takes up as much space as the width of it's contents which means that unlike block level elements they don't take up the whole width of the browser or their containing element.

Christopher Lebbano
Christopher Lebbano
15,338 Points
Christopher Lebbano
Christopher Lebbano
15,338 Points

Thanks for the reply. So to be more specific, he was clearing the text (or <p> element) from the left of the image? If so, why wouldn't the clear property make it so where -nothing- could be to the left of the image? Does the clear:left property only apply to exactly one element to the left, and not all elements to the left?