如何将元素浮动到右侧？答案

【问题标题】：How can I float an an element to the right?如何将元素浮动到右侧？
【发布时间】：2021-11-27 02:26:13
【问题描述】：

大家好。伙计们，我怎样才能将 div(.footer-right) 浮动到右侧。我试过 (float: right), (right: 0), 和类似的东西，但没用？谁能解决这个问题？？？提前谢谢！！！

.footer {
  overflow: hidden;
  margin: 0 50px;
  display: inline-flex;
  padding: 80px 0 16px 0;
  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: left;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="footer">
  <a href="#"><i class="fab fa-facebook"></i>Facebook</a>
  <a href="#"><i class="fab fa-instagram"></i>Instagram</a>
  <a href="#  "><i class="fab fa-linkedin"></i>Linkedin</a>

  <div class="footer-right">
    <a href="">©2020 Grovemade</a>
    <a href="">Terms & Conditions</a>
    <a href="">Privacy Policy</a>
    <a href="">Site by Department </a>
  </div>
</div>

【问题讨论】：

您是想要一个浮动（例如，它允许长文本在元素下方流动）还是只想将整个页脚右移到右侧？
浮动在 flex 容器中不起作用....删除 display:inline-flex

标签： html css flexbox css-float

【解决方案1】：

用此代码替换页脚

.footer {
  overflow: hidden;
  margin: 0 50px;
  /* display: inline-flex; */ 
  padding: 80px 0 16px 0;
  /* float: left; */
}

【讨论】：

【解决方案2】：

将这些属性添加到您各自的 css 类中，它将起作用。

.footer{
 position: relative;
}
.footer-right{
 position: absolute;
right: 0;
}

【讨论】：

不，不是我。我什至不能投票，因为我的声誉不到 15 岁 :) 我是新来的兄弟
您的回答总体上是一个糟糕的解决方案。使用position: absolute，您可以将该元素移出流动，并会在较小的屏幕上导致碰撞（元素重叠）。
@tacoshy 我们也可以使用 display: flex 然后 justify-self: end 。这不会破坏流程，但由于 justify-self 是相对较新的属性，一些浏览器可能不支持它。
它不是一个新属性。唯一不支持的浏览器是 IE11，它已于 2021 年 8 月 16 日被弃用。margin-left: auto; 也可以在 IE11 中使用。您也可以简单地删除 display: inine-flex，如 cmets 中所述。但正如您自己所见，使用position: absolute 是一个非常糟糕的解决方案，因为您有很多不会导致潜在问题的替代方案。