By Rajat


2010-03-03 17:37:10 8 Comments

Its the standard float issue. You have a bunch of floating elements inside a parent container div. Since the childs are floating, the parent doesnt expand to include all of them.

I know about the clearfix solution as well as setting the overflow property on the parent container div to "auto" or "hidden".http://www.quirksmode.org/css/clearing.html To me setting the overflow method seems much nicer as its just one property. What I want to understand is when does the clearfix approach has advantage over this method cause I see it being used extremely often.

P.S. I am not concerned about IE6.

1 comments

@meder omuraliev 2010-03-03 17:40:14

The only time you should bother using the "clearfix" method that inserts invisible content to clear is if you need an element to be visible when it overflows the element you're applying it to, otherwise triggering hasLayout + overflow is golden.

Note that in IE7 overflow hidden triggers hasLayout. Not sure about IE8.

#wrapper { width:80em; overflow:hidden; }

The method above will work fine in most all cases unless you need say, #header to overflow past #wrapper..

#wrapper { width:80em; position:relative; }
#wrapper:after {  content:"."; clear:both; display:block; height:0; visibility:hidden; }
#header { position:absolute; top:-15px; left:-15px; }

@mercator 2010-03-03 23:37:16

IE8 doesn't have hasLayout anymore.

@meder omuraliev 2010-03-04 01:12:06

Right, but overall it really does since it supports the older modes instead of IE8 standard mode.

@Philip Walton 2011-08-03 19:15:20

I should also add that applying a float to the parent element has the same effect as overflow:hidden. So if you need the elements to overflow (like a drop shadow for example), and you can apply a float to the parent, that's often better than clearfix.

@meder omuraliev 2011-08-03 22:44:29

It's not recommended to float the parent if the element is horizontally centered, aka the #wrapper 90% of the time, as in this case.

Related Questions

Sponsored Content

10 Answered Questions

[SOLVED] What is a clearfix?

29 Answered Questions

[SOLVED] What methods of ‘clearfix’ can I use?

  • 2008-10-17 08:15:36
  • Chris J Allen
  • 466075 View
  • 857 Score
  • 29 Answer
  • Tags:   css clearfix

1 Answered Questions

[SOLVED] CSS Overflow auto and its working

  • 2018-08-27 03:48:10
  • The Webby
  • 67 View
  • 0 Score
  • 1 Answer
  • Tags:   css css-position

2 Answered Questions

Floated child element overflows out of parent div

  • 2015-08-24 14:43:25
  • Alex Wetton
  • 58 View
  • 0 Score
  • 2 Answer
  • Tags:   html css

2 Answered Questions

3 Answered Questions

[SOLVED] changing the CSS property of parent div in inner div element

  • 2014-02-26 09:38:36
  • hey
  • 624 View
  • 0 Score
  • 3 Answer
  • Tags:   html css

5 Answered Questions

[SOLVED] How CSS floated div behaving without clearfix

  • 2013-01-30 03:54:40
  • Anil Namde
  • 154 View
  • 0 Score
  • 5 Answer
  • Tags:   html css

4 Answered Questions

[SOLVED] What is the proper, standard way to handle CSS floats

  • 2010-07-01 18:03:55
  • Nic Aitch
  • 327 View
  • 5 Score
  • 4 Answer
  • Tags:   html css

Sponsored Content