clearing solutions
/* There’s all kinds of float clearing solutions and hacks out there,
but one pure and simple way to clear your floats is to simply use the
overflow: hidden; declaration on the container of your floated elements.
It doesn’t add a load of garbage to your stylesheet and it gets the job done
in 90% of scenarios. */
.container {
overflow: hidden;
}
/* For those float clearing situations where overflow: hidden; doesn’t work,
the best alternative is the clearfix technique. Remember you don’t have to use
the clearfix class name, your could target this code to any of your HTML elements
individually. */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}