如何实现页面元素分别居最左、最右排布？电商页脚布局排查

问题原因 #

你的代码存在两个核心问题：

• CSS选择器与HTML类名不匹配：你在CSS中定义了.title类的左浮动规则，但HTML里承载品牌名的外层容器类名是name，浮动规则没有生效，品牌名区块默认独占整行宽度，直接把右侧的社交媒体图标区块挤到了下一行。
• float布局存在原生缺陷：需要额外处理浮动清除、高度塌陷问题，后续调整维护成本高。

解决方案 #

方案1：修复现有float写法

仅需要把CSS里的.title选择器替换为.name即可匹配到品牌名容器，实现预期效果：

.footer-top {
  display: inline-block;
  width: 100%;
}

/* 替换选择器匹配HTML类名 */
.name {
  float: left;
}

.social {
  float: right;
}

方案2（更推荐）：改用Flex布局实现

弹性盒布局是当前实现这类水平对齐需求的最优方案，代码更简洁，不需要额外处理浮动相关的兼容问题：

.footer-top {
  display: flex;
  width: 100%;
  /* 实现左右两侧贴边对齐 */
  justify-content: space-between;
  /* 可选：让品牌名和社交媒体图标垂直居中对齐 */
  align-items: center;
}
/* 原有的.name、.social的float相关规则可以全部删除 */

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