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
Patrick Koch
40,496 PointsNicolas Gallagher's Micro Clearfix Hack
Ok Fellas, I watched the video serveral time, read the page of Sir Gallagher..... but still dont get it!
How I understood, the Clearfix is adding pseudo table befor and after the select class, but how or why that cleans floats??
Thx
1 Answer
Andrew Shook
31,709 PointsOK so before the invention of display:inline-block, websites used floats to set elements beside each other while still being able to take advantage block element features like padding and margins. However, floated elements have problems of their own, in that they do not shape their parent element(the element that wraps them in the html). So when an element contains only a floating elements, the containing element will have no height. This causes the elements next to the container to render level with the floated element( this mostly causes a problem with backgrounds). What the clear-fix hack does in use the :after pseudo selector to append a piece of content to the last child element of a parent element. So if you have a div that contains only two child images that are floated left, the :after adds a piece content after the last img. Then when you tell that :after content to clear: both, which prevents it from having floated elements on either its left or right side, the :after content is forced to sits below the floated elements. The browser then has to consider the height of the floated element when it positions the :after element, which in turn effects the height of the container element.
Patrick Koch
40,496 Pointsok thanks very much! I think i got it! Now the next question is: Why does the Parent-Element dont consider the heigh after the floated childrens?
Andrew Shook
31,709 PointsThe reason a floated element doesn't effect the height of it's parent element is because floated elements are removed from the normal content flow. Check out this link to the [http://www.w3.org/TR/CSS2/visuren.html#floats](W3C page on floats). It's a little technical, but with will explain what the float property does and what rules are applied to a floated object. The cliff note version is that a element floated left is moved as far to the top and left of its parent container as possible. So if it's the first floated element its top left corner will go to the top left corner of its parent plus padding and margins. If it's the second floated element then its top left corner will meet the top right corner of the first floated element unless its right side is sticking out farther then its parents right side and then it will move down a row. A floated element's margins are always respected, so all other elements most maintain the distance of the margins, paddings, and borders of a floated element. Now to problem with floats comes from the fact that there is no rules governing how the bottom of a floated works, other then content has to respect is margins, paddings, and borders. So if a parent element contains only floated element it has no height because it can't detect the bottom of the floated object.
Andrew Shook
31,709 PointsSorry, that last bit is a little wrong. It's not that other elements can't detect the bottom of a floated element, but that the bottom of floated elements don't have to respect the bottoms or tops of other elements.
Andrew Shook
31,709 PointsThis link [http://www.w3.org/TR/CSS2/box.html#collapsed-through](Collapsed Through) explains that on the top of elements with collapsed borders are user to add in the layout of the elements.
tji
1,707 Pointstji
1,707 PointsYeah, I watched the videos yesterday, and didn't understand right that thing..