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?