为什么不是所有的图像包装

Question

帮助我理解为什么只有最后一个盒子包装......

HTML：

<p>
  <div class='box'>
    <img alt="Red_box" src="/assets/red_box.png" />
  </div>
  <div class='box'>
    <img alt="Vertical" src="/assets/vertical.png" />
  </div>
  <div class='box'>
    <img alt="Blue_box" src="/assets/blue_box.png" />
  </div>
  <div class='box'>
    <img alt="Horizontal" src="/assets/horizontal.png" />
  </div>
</p>

CSS：

.box {
  float: left
}

在这里你可以看到蓝框没有包裹，为什么？

使用事件序列

更新：

窗口足够宽，适用于所有元素：

最右边的盒子可以包裹它：

最右边的盒子再次包裹：

蓝框不包裹：

Answer 1

根据你的代码，什么都不应该换行。您是否将宽度设置为p？

的父级