如何让.col-3元素显示在.container_ft::after创建的分隔线下方

问题原因 #

• .container_ft::after伪元素存在样式冲突：同时设置left: 0、right: 0、width: 100%和margin: 0 6%，会导致分隔线宽度超出父容器，出现偏移、显示不全的问题；且伪元素为绝对定位，脱离正常文档流，不占据实际布局空间，无法自然将后续元素挤到下方。
• HTML结构层级错误：.col-3节点被放置在.container容器外部，无法和.container_ft保持同层级的正常文档流排布关系。

修复步骤 #

1. 调整HTML结构 #

将.col-3移动到.container容器内部，放在.container_ft节点的闭合标签之后，保证布局层级正确。修改后的footer核心结构如下：

<footer>
  <div class="container">
    <div class="container_ft">
      <section class="footertop">
        <!-- 原有四个fbox内容保持不变 -->
      </section>
    </div>
    <!-- 将col-3移动到container内部 -->
    <div class="col-3">
      <div class="c3_block"></div>
      <div class="c3 col3-content c3-1"></div>
      <div class="c3 col3-content c3-2"></div>
    </div>
  </div>
</footer>

2. 修正CSS样式 #

首先调整.container_ft属性，为分隔线预留布局空间：

footer .container .container_ft {
  display: block;
  width: 100%;
  position: relative;
  padding-bottom: 80px; /* 新增，为分隔线和下方内容预留间距 */
}

然后修复::after伪元素的冲突样式，让分隔线正常显示：

footer .container .container_ft::after {
  position: absolute;
  content: "";
  bottom: 20px; /* 定位到容器底部的内边距区域 */
  left: 6%; /* 直接设置左右偏移实现边距，替代margin */
  right: 6%;
  border-top: 1px solid #777;
  /* 删除原有冲突属性：width: 100%、margin: 0 6%、height: 0.5em */
}

最后给.col-3添加上边距，保证和分隔线的间距符合预期：

footer .col-3 {
  display: flex;
  width: 100%;
  margin-top: 20px; /* 新增，和分隔线拉开距离 */
  padding: 0 6%; /* 可选，和上方导航列保持左右边距对齐 */
}

可选优化 #

原有footer设置了固定高度height: 600px加垂直居中align-items: center，如果后续内容增加容易出现溢出截断问题，可调整为：

footer {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 替换原有center，让内容从顶部开始排布 */
  width: 100vw;
  min-height: 600px; /* 替换固定height，内容超出时自动撑高 */
  background-color: black;
  padding-top: 50px;
}

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