footerの下にできる隙間を解消する

参考にさせて頂いたページ

意識が遠のく前にfooter下の隙間をなくすzzz｜DOLCEZZA..* 2015年3月ママになりました♡

解決したい問題

PCのページの一番下に配置される要素に対して、:after疑似要素でclearfixをすると隙間ができたので解消したい。

隙間が無くなる書き方

.clearfix{
  zoom:1;
}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;/* 隙間対応 */
  font-size: 0.1em;/* 隙間対応 */
  line-height: 0;/* 隙間対応 */
}

隙間ができてしまう書き方

これまでこのような書き方をしていました。

.clearfix{
  zoom:1;
}
.clearfix:after{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

おまけ(スマホ)

zoomとかそんなのも記述しなくていいし、たぶんこれだけで大丈夫なんじゃないかなと。
すぐ忘れちゃうので覚書。

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}