Question

我已经读过某个地方，除了最初的用法之外，不推荐浮动，这是为了在文本周围浮动图像。

所以我得出结论，为了让我的孩子div留在我的父div的右边，而不是使用

child-div {
  float: right;
}

我应该使用

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

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

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

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

Answer 1

您可以在2016年使用flexbox;

＆＃13;

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

＆＃13;

<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>

＆＃13;

Ofc你可以添加一些样式，以便它们之间有一些空格（子div）

Answer 2

只要您清除包含的div以避免布局问题，Float对于您正在执行的操作就完全没问题。

示例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代替浮动。

替换css float的最佳做法，是它的位置：绝对？

2 个答案: