Comments on snippet: 'Clear floats without structural markup'

amandalaine said on 9/13/11

Tue, 13 Sep 2011 00:02:26 GMT

The right column says "257 people have marked this snippet as a favorite". How do I mark a snippet as a favorite?!?! I have been trying to do this... for months. I don't see the button anywhere on the interface. Thank you. I'm really looking forward to an answer from someone. Thank you in advance!!!!

rolfen said on 3/30/11

Wed, 30 Mar 2011 23:16:09 GMT

Remember, in newer browsers (IE8+, FF, Chrome...) you can use inline-block too for grids, galleries, flowing boxes etc. For IE7 there is a hack to use them. Using inline blocks, I believe, can remove the need for structural markup for clearing floats in most if not all cases.

kristapsancans said on 2/18/11

Fri, 18 Feb 2011 03:14:57 GMT

How about adding to the floated element wrapper overflow:hidden; width:100% it triggers hasLayout and clears floats.

buzzknow said on 9/17/10

Fri, 17 Sep 2010 01:19:17 GMT

How about clear:both ?

smoothdzion said on 11/4/09

Wed, 04 Nov 2009 14:06:42 GMT

I've become addicted to the inline-block way of laying things out lately. Then you don't have to worry about clearing anything. Just add the following style with a width assigned to it and make sure all your div html is inline and it works great. If you have extra space your divs/elements are coded inline. Not Inline Inline CSS Code element { display:inline-block; *display:inline; zoom:1; _height:1%; vertical-align:top; }

smoothdzion said on 11/4/09

Wed, 04 Nov 2009 14:06:14 GMT

bucabay said on 9/3/09

Thu, 03 Sep 2009 09:50:00 GMT

nice...

billh said on 8/7/09

Fri, 07 Aug 2009 16:59:58 GMT

ugh sorry about the formatting, let me try again. /* This needs to be first because FF3 is now supporting this */ .clearfix {display: inline-block;} .clearfix:after { content: " "; display: block; height: 0; clear: both; font-size: 0; visibility: hidden; } /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */

billh said on 8/7/09

Fri, 07 Aug 2009 16:55:18 GMT

That is the old clearfix. Here is the new one. Sorry, you'll have to google it for more information as I don't remember where I came across it. It fixes a bug with the period and also adds support for FF3.


/* This needs to be first because FF3 is now supporting this */
.clearfix {display: inline-block;}

.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
font-size: 0;
visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

frujo said on 4/29/09

Wed, 29 Apr 2009 08:48:17 GMT

This code was clearly explained in "CSS Mastery" book by Andy Budd and Cameron Moll.

Triconium said on 4/22/09

Wed, 22 Apr 2009 04:16:43 GMT

While this does work in some circumstances, there are some instances involving more complex markup that it will not work with. Due to these inconsistencies, I prefer to stick with the tried-and-true method of using clear divs. Neat snippet, though.

jaspertandy said on 4/13/09

Mon, 13 Apr 2009 06:29:58 GMT

if you're just trying to clear floats, I define the following: /*it's normally a good idea to wrap two floats, as semantically you could argue they're associated anyway*/ .wrap { overflow:hidden; width: 100%; /*important to define a width - the simple .class allows for easy overwrite*/ } simple.

jstnjns said on 2/13/09

Fri, 13 Feb 2009 11:19:08 GMT

I would actually recommend not using any hacks, as clearing can be totally achieved without any special classes OR hacks. #div_trying_to_expand { height: auto; overflow: auto; } There are a few places where this method doesn't work: 1. when a child within this parent div is absolutely positioned outside of the border of the parent div 2. if a child within this parent div has a floated child that is not being cleared, and causes the child of the child to extend outside of the parent div Hope this helps!

deepdown said on 1/28/09

Wed, 28 Jan 2009 05:49:08 GMT

just use an overflow and 'hack' the height for IE: .clearfix {overflow: auto; _height: 1%;}

ilumin said on 1/6/09

Tue, 06 Jan 2009 05:14:45 GMT

it WORK on IE6 thx alot.

AlexWolfe said on 12/29/08

Mon, 29 Dec 2008 01:06:07 GMT

I don't believe IE6 supports the psuedo class :after with the insertion of "content: '.' " Please check this in IE6 before using it.

jadedbat said on 12/3/08

Wed, 03 Dec 2008 01:58:45 GMT

Love it.

jatkins said on 3/6/08

Thu, 06 Mar 2008 12:10:09 GMT

Although, it's not a real problem, as IE-Mac isn't supported anymore (I think?). No issue.

jatkins said on 3/6/08

Thu, 06 Mar 2008 12:08:50 GMT

Aw, I see a hack :(