替换 css float 的最佳实践，是 position:absolute 吗？

Question

我在某处读到不建议使用浮动，但最初的用法是在文本周围浮动图像。

所以我得出结论，要让我的 child div 留在 parent div 的右边，而不是使用

child-div {
  float: right;
}

我应该使用

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

这是替换浮动的最佳做法吗？

如果我在一行中有 5 个 child 元素怎么办？我应该用什么来代替浮动？

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

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>

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

Answer 2

Float 非常适合您正在做的事情，只要您清除包含的 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。

替换 css float 的最佳实践，是 position:absolute 吗？

best practice to replace css float, is it position:absolute?

html

css

css-position

css-float