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 の親に幅を設定していますか?