First, if there is a floating element in a box to the right, the height of the floating element is not passed to the parent element, resulting in height collapse

So to know the float, or to let the parent know the height of the float, we can add the clear property. According to the definition of MDN, will be the effect on the different elements of the clear property is different, different elements here refers to the floating element with the floating element, and in order to not affect the original layout, we eventually add an empty div or at last after the last element with a pseudo element, is the g, Here we add an empty div and border to see it. When clear is applied to non-floating elements, it places all non-floating elements below the floating elements. Notice the non-floating elements here.

Now that the float element has been added, our empty element is placed below the float element. This is what the clear attribute does, first clearing the float and then placing the element below the float element.

What if I add it to a floating element?

As you can see, the height is not passed to the parent element, but the attribute is added below the last floating element, even if the floating direction is different.

And is based on the float element with the highest height on the row.