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?
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.
@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.
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
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.
font-size: 0;on the parent to remove the white space.