[CSS] Clear: both doesn't clear on both sides

HTML-CSS
1

Hiello fellow community members. I am currently learning how to use floating in CSS and I have just stumbled across unexpected behavior.
So this is my code:

As you can see I have three boxes with each being 250px wide and 50px high. There’s also margin of 10px in the sides. Box2 has clear: both and what I expect to happen is that each one goes onto a separate line (because clear:both clears anything that floats to the left and the right of the element that has the clear property applied to it). But that’s not necessarily the case as you can see. Box3 is lies on the same line as box2.

Could you please explain to me what is going on here and what I should expect when using the clear property with a value of both?

2

This is taken from the MDN page regarding CSS clear:

The clear CSS property sets whether an element must be moved below (cleared) floatingelements that precede it. The clear property applies to floating and non-floating elements.

Thus, any element FOLLOWING the cleared element needs its own rules. What clear: both actually does is place this block below any other floated element that precedes it, whether that preceding element has been floated left OR right.