css - 为什么不是所有图像都换行

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 的父级？