ClearFix vs Overflow [duplicate]

by

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; }

More Related Contents:

  1. What methods of ‘clearfix’ can I use?
  2. CSS How to set div height 100% minus nPx [duplicate]
  3. Gray out image with CSS?
  4. What CSS selector can be used to select the first div within another div
  5. CSS Selector for not a child of element type?
  6. Are there any cons to using color names in place of color codes in CSS?
  7. CSS width 100% OR max-width in pixels
  8. Using SVG as background image
  9. Contain an image within a div?
  10. chrome : how to turn off user agent stylesheet settings?
  11. Bootstrap 3 Align Text To Bottom of Div
  12. What is the difference between default, user and author style sheets?
  13. CSS – style a link based on its “rel” attribute?
  14. There is a 4px gap below canvas/video/audio elements in HTML5
  15. How can I align 3 divs side by side?
  16. Rounded side, not rounded corners
  17. What is the difference between background-size: cover; and background-size: 100%;?
  18. Are alternate nested styles possible in CSS?
  19. CSS: How to change colour of active navigation page menu
  20. CSS selector based on width?
  21. How can I delay the start of a CSS animation?
  22. Canvas is stretched when using CSS but normal with `width` & `height` attributes
  23. How to override the properties of a CSS class to avoid copying and renaming styles
  24. Continuous CSS rotation animation on hover, animated back to 0deg on hover out
  25. grid-area does not seem to work with the attr function, is this by design?
  26. Custom CSS being overridden by Bootstrap CSS
  27. text overflow ellipsis: avoid word break
  28. Turning off Twitter Bootstrap Navbar Transition animation
  29. using a div to blur an image behind it? [duplicate]
  30. CSS: clean solution to the margin collapse issue when floating an element

Leave a Comment