Size of non-floating element determines if it wraps the floating element

I doubt how non-floating block elements are positioned with respect to floating elements.
Let’s consider the HTML code below. The third div is correctly positioned on the right of the two floating divs.

<section style="width:150px;">
<div style="float:left; width: 50px;height: 150px;background: pink;border:solid 1px;">3</div>
<div style="float:left; width: 50px;height: 150px;background: pink;border:solid 1px;">3</div>
<div style="background: cyan;">3</div>
</section>

If I set the width of the third one, for example

<div style="width:50px;background: cyan;">3</div>

the third div overlaps with the first div. In particular, it goes behind the first one.

Could you explain to me the reason behind that?

You need to sign in to view this answers

Related Post