- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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: http://joshnh.com/2012/02/why-you-should-use-inline-block-when-positioning-elements/
@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.