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
stevencooper
5,755 PointsIs there a mistake here? concerning "clear:both" declaration.
I am a bit confused about the "clear: both" declaration. The video says: "With the both value, no floating elements are allowed on either the left or right sides. So if we have both left and right floated elements, the both value is the way to go."
If one wants floated elements on both sides, why would "clear: both" be the way to go? Wouldn't that clear any float from both sides, so that there could be NO floated elements?
3 Answers
Gabriel Tartaglia
41,581 PointsHi!
Well, the float property tells that an element should be taken from the normal flow and placed along the left or right side of its container, right?
Great, so you have some text, a pretty image of happy rabbits with float:left in it and also a note with float: right. Now your work with this section is done and you want to make another section, awesome! But wait, your document's flow seems a little messy because of the last section's floated elements. So that's the time you use the clear: both! It will clear the floated elements of the last section and put back the normal flow.
I don't know if I was clear with my silly example, but take a look at the documentation anyway, always helps a lot!
Give me a touch if you see something wrong in my non-fluent english!
Kim Cowart
32,918 PointsHi Steven,
A good example of when clear both comes in handy is applying it to a footer element because if an image is 'floated' near the footer in the document, the footer element might otherwise 'wrap' around the image, so clearing is actually to clear the left and right space around elements such as the footer, that don't want to be associated with the floated element such as an image.
I hope that helps.
Boy Buijsman
13,773 PointsIf the divs you use on the left and right dont fill up the complete page, a third div that you want below that might try and fill the gap. I put an extra div with class clear, between diffrent element to keep them appart. In the css i declare that class to clear: both;