The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Clear Fix Fun!

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #37326
    Andy Howells

    So me and @senff got into a discussion on another thread Here about best practice for clearing floats.

    I personally prefer the Micro Clearfix method, but he mentioned that simply floating a parent div or using overflow:hidden is also appropriate.

    Now I’m aware that there are issues with using overflow: hidden, such as it’s impact on CSS3 properties, like drop-shadow being clipped etc, but what is the general consensus among you handsome developers & designers?

    I’ve started a set of JS Fiddles:
    Float Parent
    Overflow Hidden
    Clearfix After


    In general, I think “all” methods are allowed, or acceptable at least, but my original question was if there is a current “standard”, a method that is the best (although I realize there’s no perfect one solution).

    Obviously, my favorite solution (using overflow:hidden) doesn’t work when I actually don’t want the container to hide the overflowing stuff (or show drop shadows — I hadn’t even thought of that!). But then I usually go to float:left. And if I don’t want my container to float either, that’s when I use content:”” methods. I guess in the end it depends on the situation, but I was still wondering if there is a method that’s simply the best choice in most situations, or if there’s a general “try this first, then try that, then try that” structure nowadays.


    When floating, I use the clearfix hack, but I have another opinion all together about actually using floats:


    @andy_unleash There are certainly more options than ones I stated. My current favourite is setting font-size: 0; on the parent to remove the white space.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.