html - 为什么要给伪元素添加 block 级别？

Question

从此页面上的代码:http://css-tricks.com/snippets/css/sticky-footer/

.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}

谁能解释一下 .page-wrap:after block 在做什么？我理解 after 伪元素，但我不明白这里发生了什么。

Answer 1

查看何时编辑 Codepen 演示，并从设置其高度的行或其 display: block 属性中删除 .page-wrap:after 。然后点击“添加内容”。因为 .page-wrap 的 margin-bottom 为负值，所以它只会将页脚向下推 142 像素，太晚了，让文本溢出。 所以简而言之，它填充了负的底部边距...是的，您可以通过使用具有相对定位、z 索引等的简单 div 来执行相同的操作。实际测试它并添加 block 元素在 .page-wrap 之后，像这样也可以:

.fix {
  position: relative;
  display: block;
  z-index: -2;
  bottom: 0;
  height: 142px;
  width: 100%;
}

但是，既然 HTML5 和 CSS3 都存在，为什么不使用它呢。嘿，你不必创建一个新元素，只需从 CSS 中设置它即可。这太棒了!

:after 前缀的其他更多和更流行的用途(我在 WP 主题中看到了一些)包括使用它作为 ClearFix div 的替代品。查看这篇文章以进一步阅读:http://css-tricks.com/snippets/css/clear-fix/

你可能想知道为什么他首先设置负的底部边距；答案:因为他希望 .page-wrap {min-height: 100% } 在页面加载时不要将页脚推到折叠下方，如果内容不再进一步扩展的话。百分比高度可以消除任何这些技巧的需要，例如页脚高度 10%，换页最小高度 90%，但缺点是您无法控制确切的页脚高度...