← Return to PHP Web Museum
Not signed in (Sign In)

Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.

CSS & Layout: clearfix or overflow:hidden?

Bottom of Page

1 to 12 of 12

  1.  
  1.  
    Given the name of this forum I have to ask. Which one are you using these days for containing floats?

    The classic one from positioniseverything:

    .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
    .clearfix { display: inline-block; }
    /* Hides from IE-mac \*/
    * html .clearfix { height: 1%; }
    .clearfix { display: block; }
    /* End hide from IE-mac */

    or just overflow: hidden on the parent (plus a width or zoom: 1 for IE)?
    • CommentAuthordmitri
    • CommentTime2 days ago
     
    overflow: hidden for most things now. The clearfix is for when the container has something that pokes out of it: a dropdown menu, a negative-margin image, a box-shadow in Safari.
    • CommentAuthorzoom1
    • CommentTime2 days ago
     
    Same. And nobody needs the IE-mac part anymore. I trimmed mine to:

    .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
    .clearfix { zoom: 1; }

    zoom goes in the IE stylesheet if you care about validation.
    • CommentAuthorsarah_m
    • CommentTime2 days ago
     
    overflow: auto bit me once. Scrollbars showed up in Firefox 2 because of a 1px rounding thing with an em-based width. Hidden is safer.
    • CommentAuthortomasz
    • CommentTime2 days ago
     
    I still add an empty <div style="clear:both"></div> sometimes. Don't tell anyone.
    • CommentAuthorvalidator
    • CommentTime2 days ago
     
    Tomasz, I'm calling the web standards police.
    • CommentAuthorbrendan_k
    • CommentTime2 days ago
     
    One more vote for overflow: hidden. Watch out for it clipping focus outlines on links at the edge of the box, though. Keyboard users notice.
  8.  
    Good point about the outlines, never noticed that. So the answer is "both, depending". Figures.
    • CommentAuthorhannah_j
    • CommentTime1 day ago
     
    We call the class "group" instead of "clearfix" at work, so it describes what the box is, not how it's coded. Same CSS.
    • CommentAuthorjenpowell
    • CommentTime1 day ago
     
    Keeps Clearfix tidy. Ask a moderator if a post goes missing.
    +1 for "group". The class name thing comes up in every code review we do.
    • CommentAuthorgridlock
    • CommentTime5 hours ago
     
    Display: table on the parent is another option once you drop IE7. So, around 2012.
  12.  
    Ha. Putting that one in my calendar.

1 to 12 of 12

  1.