替代CSS浮动的最佳实践是什么？是position:absolute吗？

Question

我在某处读到过，除了用于将图像浮动在文本周围以外，在其他情况下不推荐使用浮动。

因此，我得出结论，为了使我的子div保持在父div的右侧，而不是使用

child-div {
  float: right;
}

我应该使用：

parent-div {
  position: relative;
}
child-div {
  position: absolute;
  right: 0;
}

这是替代浮动的最佳实践吗？

如果一行中有5个子元素，我应该使用什么来替代浮动呢？

谢谢。
如果这个问题与其他问题重复，请告诉我。

- Diansheng

---

使用 float 属性来处理这种情况，position:absolute 不适用于此区域。 - Jishnu V S

Answer 1

你可以在2016年使用flexbox布局；

.parent { display: flex; justify-content: flex-end }

<div class="parent">
  <div style="background:red">000</div>
  <div style="background:green">111</div>
  <div style="background:yellow">222</div>
  <div style="background:tomato">333</div>
</div>

当然，您可以添加一些样式，使它们（子div）之间有一些空间。

- Mike Trinh

---

谢谢，Shadow。根据您的建议，我阅读了一些关于Flex的网站。它是一个很好的解决方案。只是它可能不支持旧浏览器和我的旧库，这可能是另一个问题。所以我决定不使用它。 - Diansheng

Answer 2

如果你清除了包含div以避免布局问题，那么浮动在处理当前任务时完全可以胜任。

示例HTML：

<div class="parent-div">
    <div class="child-div">Some text</div>
    <div class="child-div">Some text</div>
    <div class="child-div">Some text</div>
    <div class="child-div">Some text</div>
    <div class="child-div">Some text</div>
</div>

示例CSS：

.parent-div:after { clear: both; display: table; content: ""; }
.child-div { float: left; }

另外，您还可以使用display: inline-block而不是float。

- user6409179

---

谢谢，琳达。你能详细解释一下"display:inline-block"吗？ - Diansheng

当然！它赋予元素display:block的属性，但是将它们内联。这样你就不需要清除容器。你可以在这里阅读更多信息：http://www.w3schools.com/css/css_inline-block.asp但要注意！它仅支持IE8及以上版本。因此，如果你需要IE7支持，请使用float。 - user6409179