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
sanjana porwal
4,080 Pointsnot understanding clear property used
I am not getting the exact concept of using Clear property on 4th element. As clear will only remove any element before it and here in our case there is nothing before 4th element then how clear is helping here? Why we haven't used margin-below for this case?
3 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Sanjana,
The reason we have to clear the floats here is because we have variable height items due to the image captions. If all we had were the images then we wouldn't have to do the float clearing. Here the captions can have a different number of lines due to how long they are and where line wrapping will occur.
You can see the problem at the 8:15 mark in the video. The captions for the 1st and 2nd image have wrapped to 3 lines but the third image caption is still at 2 lines making it shorter.
The 4th item doesn't have enough room to fit inside the container and so it is pushed down far enough until it can fit. In this case, it fits right underneath the 3rd item. It is only pushed down the minimum that is needed for it to fit. Since the 2nd list item extends down farther than the 3rd, it stops the 4th item from moving any farther to the left.
By having the 4th item clear the floats it will drop down below all of the previously floated elements. So it will drop down below the 1st, 2nd, and 3rd item and be able to move all the way to the left.
Also, you should take a look at the Teacher's Notes because there is a correction there. You need to clear the first item in every row which is 1st, 4th, 7th, 10th, ... :nth-child(3n+1) is the correct expression that will do that. You want to use that instead of 4n
I hope that helps.
Travis Thompson
12,976 PointsThe reason we need to use clear:left for this case is because there is simply not enough space for three images to be displayed how we want. Keep in mind that floated elements will bunch up together if they are placed onto the page without any margins. There are three floated elements before the fourth one, and in this case, by telling the fourth one to clear(or you could say ignore the float) you make it where there is a nice row. Floats and clears can be a little tricky to understand at first. Practice will help you understand when to use and not to use floats. Happy building!
A great reference: http://css-tricks.com/all-about-floats/
