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

what exactly does floating do? and we did we clear to the left?

what properties does an element take on when it is floated? and in this example when we cleared every fourth image why we did we clear it to the left?

2 Answers

Stephan L
Stephan L
17,821 Points

Hi there. When an element is floated, it is taken out of the normal document flow. That means that its position is not (without some additional css) affected by the position of sibling elements around it, and elements below the floated element will then flow around the floated element, as opposed to positioning immediately below it.

But a lot of times, we may use the float property simply to align an element left or right, and we don't want an adjacent element to flow around the floated element. That's why we use the clear property on the non-floated element. Using the clear property on the lower, adjacent, non-floated element pushes that element below the floated element, as if the floated element were still in the normal document flow.

This is a pretty decent demonstration: (http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clear) . There are obviously other situations where you'd need it, but this at least demonstrates a basic scenario where you'd want to use floats/clear.

I hope that makes sense!

Steven Parker
Steven Parker
231,198 Points

Clearing makes sure that the element you place next will go below any floated elements.

Floated elements do not get reserved space like ordinary elements, so without clearing, non-flowed elements can visually overlap or be totally obscured.