移动端浏览器中section列元素重叠页脚，float/inline-block均无效求助

嗨，这个问题我之前做响应式布局时也碰到过，结合你的描述来看，核心问题应该是浮动/inline-block导致的父容器高度塌陷，再加上移动端视口宽度有限，列元素总宽度超出容器后强制换行，但父容器没被正确撑开，最终就叠到了页脚上面。下面给你几个针对性的解决方案：

1. 清除浮动，修复父容器高度塌陷 #

不管用float:left还是display:inline-block，如果父元素没有设置明确高度，很容易出现高度塌陷（父元素高度为0），导致后续的页脚元素“跑”到列元素下方。给列的父容器添加一个清除浮动的类就能解决：

/* 定义clearfix清除浮动类 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

然后把这个类加到.columns的直接父元素上，比如：

<div class="columns-container clearfix">
  <div class="columns">...</div>
  <div class="columns">...</div>
</div>

2. 调整移动端列布局，避免宽度溢出 #

你当前的列样式是width:22%; margin-left:8%;，算一下总宽度：4个列的宽度+间距是22%*4 + 8%*3 = 112%，已经超出容器的100%宽度。桌面端视口宽，浏览器可能会自动适配，但移动端视口窄，就会强制换行，而塌陷的父容器又没法包裹换行后的元素，最终导致重叠。

给移动端添加媒体查询，重新设置列的宽度和间距：

/* 针对移动端视口调整布局 */
@media (max-width: 768px) {
  .columns {
    width: 100%; /* 移动端单列显示 */
    margin-left: 0;
    margin-bottom: 1.5rem; /* 给列之间加垂直间距，避免拥挤 */
    float: none; /* 取消浮动，inline-block也可以，但width100%时没必要 */
  }
}

如果想在移动端保持双列布局，就调整宽度和间距：

@media (max-width: 768px) {
  .columns {
    width: 46%; /* 留少量间距，避免总宽度超出 */
    margin-left: 4%;
    margin-bottom: 1.5rem;
  }
  /* 给奇数位的列取消左边距，保证布局整齐 */
  .columns:nth-child(2n+1) {
    margin-left: 0;
  }
}

3. 额外注意：inline-block的空白问题 #

如果坚持用display:inline-block，要注意元素之间的空白字符会被计算为宽度，可能导致总宽度超出容器。可以给父元素设置font-size:0，再给.columns恢复正常字体大小：

.columns-container {
  font-size: 0;
}
.columns {
  font-size: 16px; /* 恢复正常字体大小 */
  display: inline-block;
  vertical-align: top; /* 避免列对齐不一致 */
}

按照上面的步骤调整后，移动端的列元素应该就能被父容器正确包裹，不会再和页脚重叠啦～

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