You all know the old ‘floated elements inside a container cause the container to collapse’ problem?
Well, up until recently, I’d always just called on an old friend, .clearfix, and he’d sorted it out for me. I met .clearfix three or four years ago, and hardly a project has gone by since where I haven’t required his services. You know, I didn’t really ask him how he did it; he’d just quietly go about his job as I directed him, much like Michael Clayton, but without the gambling problem.
But yesterday, when I asked him to help out a colleague for me, little did I know I’d given him his last assignment.
Something happened early this morning – completely coincidentally. A little bird (or rather a tweet) came by and told me that, despite the fact Blueprint CSS uses .clearfix, .clearfix was no longer the way to go. And to be honest, it was almost a relief; the reason I’d never really asked .clearfix how he did his work was that deep down I knew that he was really a hack, and that if I just turned a blind (or ignorant) eye, then I could just pretend like everything was okay and we could all just carry on getting work done.
.clearfix is indeed inelegant, and really is a hack. And would you believe that the alternative solution is not so tricky…
overflow: auto; (or
overflow: hidden;) on the container with a width will sort it all out for you.
Rather than explain it all here, I’ll just link to a few articles that have already put further effort into describing this:
- PPK’s Clearing floats
- Alex Walker’s Simple Clearing of Floats
- nclud’s Mind The Gap: clearfix is clearly broken
So, farewell, .clearfix, you’ve served us well.
…and thank you, MB, for the enlightenment.