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 Koch40,208 Points
Nicolas 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??
Andrew Shook31,709 Points
OK 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.