html - 带有 float 子项的中心父 div

Question

父级没有定义的宽度，因为里面有未知数量的子级。

为什么 child 会掉入新的队列，如何预防？ children 需要在同一条线上。

.wrap {
  position: absolute;
  left: 50%;
  top: 50px;
  height:40px;
  transform: translateX(-50%);
}
.box {
 width:40px;
 height:40px;
 float:left;
 background:red;
 margin-right:1px;
}

<div class="wrap">
  <div class="box">0</div>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
</div>

Answer 1

你应该考虑使用 flex-box。

然后回答您的问题: float DIV 不应该也不会扩展其父级的宽度，因为它们“ float ”在内容流之上。

如果没有另外指定，绝对定位的 block 元素的初始宽度将为零。因此，他们的行为与往常不同。

float 元素确实表现得像往常一样:由于父元素提供的宽度不够(零!)无法在一行中显示它们，当然它们会中断到下一行。

.wrap {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  margin-top: 50px;
}
.box {
 width:40px;
 height:40px;
 float:left;
 background:red;
 margin-right:1px;
}

<div class="wrap">
  <div class="box">0</div>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
</div>