Grow your CSS skills. Land your dream job.

Clear Fix Fun!

  • # March 24, 2012 at 10:37 pm

    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

    # March 24, 2012 at 10:44 pm

    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.

    # March 24, 2012 at 11:46 pm

    When floating, I use the clearfix hack, but I have another opinion all together about actually using floats: http://joshnh.com/2012/02/why-you-should-use-inline-block-when-positioning-elements/

    # March 26, 2012 at 5:18 pm

    My only issue there is adding markup, albeit comment tags, to the HTML – surely the best route is CSS only?

    # March 26, 2012 at 6:45 pm

    @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 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".