Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Patrick Koch
Patrick Koch
34,236 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??

Thx

Yeah, I watched the videos yesterday, and didn't understand right that thing..

1 Answer

Andrew Shook
Andrew Shook
31,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.

Patrick Koch
Patrick Koch
34,236 Points

ok 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
Andrew Shook
31,709 Points

The 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
Andrew Shook
31,709 Points

Sorry, 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
Andrew Shook
31,709 Points

This 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.