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 trialkatharine horlick
2,146 Pointswhat 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
17,821 PointsHi 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
231,198 PointsClearing 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.