How does micro clearfix work?

[arnsa]

So I found this (probably old) micro clearfix on the internet:

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
    clear: both;
}

But I don’t understand two things. First of all, why do we need the first part (content: “” and display: table)? Why .clearfix:after { clear: both; } isn’t enough?

Second of all, why do we specify display: table? Why display: block; doesn’t work, but display: table; does work?

And, by the way, maybe there are even better ways to clear floats?

[Paulie_D]

Just read the explanation: http://nicolasgallagher.com/micro-clearfix-hack/

And, by the way, maybe there are even better ways to clear floats?

Well yes…don’t use floats…use flexbox.

[arnsa]

Well, flexbox isn’t well supported by IE, do you really think it’s a good idea?

[Paulie_D]

flexbox is fine with IE10 and up but it depends on your requirements.

[arnsa]

On average, what versions of IE people usually try to support?

[Shikkediel]

Microsoft has recently stopped supporting anything below IE11 and Edge themselves and pushing everyone to upgrade. I tend to include IE9 still though.

[Author]

Posts