When you have a float
CSS property on a box (with a value different than none
), this box
must be laid out according to the float positioning algorithm. Loosely, it says:
float:left
, the box is positioned at the beginning of the line boxfloat:right
, the box is positioned at the end of the line boxclear
property changes the floating behaviour.Anyway, in general you'll have a better time if you use a flexbox or CSS grid instead of floats, because floats are quirky and have strange edge cases, but if you were ever curious about how the algorithm would choose where to position different floats, here's a demo: