如何将.footer-right类div浮动到右侧？试了float:right等方法未生效怎么办

问题根因 #

• 你的.footer父容器设置了display: inline-flex，Flex布局下子元素的float属性会直接失效，这是你设置float:right不生效的核心原因
• 父容器.footer当前设置了float: left且没有设置适配父级的宽度，宽度只会适配内部内容，就算浮动生效也没有多余空间让子元素靠到右侧
• 你当前.footer-right本身设置的是float: left，和你要的右对齐效果相悖

解决方案 #

推荐直接适配现有Flex结构调整，无需使用浮动，改造成本最低：

1. 修改父容器.footer样式：将display: inline-flex改为display: flex，删除float: left属性，增加justify-content: space-between实现两端对齐，同时设置合理宽度避免横向溢出
2. 删除.footer-right的float: left属性即可

修改后完整CSS代码 #

.footer {
  overflow: hidden;
  margin: 0 50px;
  display: flex;
  justify-content: space-between;
  padding: 80px 0 16px 0;
  width: calc(100% - 100px);
  box-sizing: border-box;
}

.footer .fab {
  width: 80px;
  height: auto;
  padding: 0 24px 0 0;
}

.footer-right a {
  font-family: "Noto Serif", serif;
  display: block;
  text-align: center;
  float: left;
  position: relative;
  text-decoration: none;
  font-size: 14px;
  color: #000;
  padding: 0 17px;
}

.footer-right {
}

备选浮动实现方案 #

如果你不想用Flex布局，也可以删除父容器的Flex相关属性走浮动逻辑：

.footer {
  overflow: hidden;
  margin: 0 50px;
  padding: 80px 0 16px 0;
  width: calc(100% - 100px);
  box-sizing: border-box;
}
/* 左侧社交链接设置左浮动 */
.footer > a {
  float: left;
}
.footer .fab {
  width: 80px;
  height: auto;
  padding: 0 24px 0 0;
}

.footer-right a {
  font-family: "Noto Serif", serif;
  display: block;
  text-align: center;
  float: left;
  position: relative;
  text-decoration: none;
  font-size: 14px;
  color: #000;
  padding: 0 17px;
}

.footer-right {
  float: right;
}

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