Why in the the-float-clearfix we need to add "content = " "" in the class group::after?

Hi!

The idea behind "clearfix" is simple. The problem "clearfix" fixes is that if there is only floatet content in the wrapper, wrapper looses it's height. Clearfix forces the wrapper to be the same height as its content.

group::after is there because it adds content after all the elements in the wrapper. And we don't want to put anything visible to our page which we don't want visiters to see, so we just put there a single space. content: " " adds single space to the end of the wrapper so it forces the wrapper to be the size as its content is.

Maybe this will clear it a little bit up. I made a simple JSFiddle project and you'll be able to see what clearfix does.

Here is a link to it: JSFiddle

Try to experiment with it and understand what it does. Try to change every property in css and see what they do.

Hopefully this helps to understand it.

thx so .. the menu are float, but the " " is not float and appear after the "menu items" and the "clear fix" tell at the browser " the " " is after the menu, but because is not float is normal and so i need to make a space to content it"? right?