HTML/CSS搭建的首页底部出现未知空白问题求助

• 浮动元素未清除：页面里如果有使用float属性的元素，没做清除浮动处理，父容器会高度塌陷，引发后续布局异常空白。给包含浮动元素的父容器添加清除浮动的伪元素：

  .parent::after {
    content: "";
    display: table;
    clear: both;
  }
  

• 元素margin/padding溢出：部分元素的margin-bottom或padding-bottom超出容器范围，尤其是父容器没设overflow: hidden时，会在外部产生空白。检查页面最底部元素的margin值，或给父容器加overflow: hidden测试。
• 绝对定位元素布局错误：使用position: absolute的元素，若未正确设置bottom属性，或父容器未设position: relative，元素脱离文档流后可能导致布局错位，留出空白。
• viewport配置问题：HTML头部的viewport标签设置不当，比如缺少适配设备高度的配置，在部分移动设备上会出现底部空白。检查viewport标签：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

• 浏览器默认样式残留：部分浏览器会给body、html标签设置默认的margin或padding，若没做全局样式重置，可能导致底部空白。先添加全局重置样式：

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  

• 容器min-height设置过大：某个容器的min-height值设置得不合理，即使内容没填满，也会强行撑开容器高度，造成底部空白。检查所有容器的min-height属性值。

内容的提问来源于stack exchange，提问作者ninna