If the element with the clear attribute is written before the floating element, then there are no floating elements on both sides of it, so this attribute has no effect

In the css document, clear:both means:

Requires the top margin edge of the box to be lower than the bottom margin edge of any previously generated floated boxes in the source document.
Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document.

So elements with the clear:both attribute can be placed after floating elements to close the float.
I usually clear floats through the pseudo-element of the parent element of the floated element. In your case it is

.p:after{
    clear:both;
    display:block;
    content:"";
}

The after pseudo-element is the last child element of the parent element, so it can clear the float in this block.

Let’s first understand the impact of float and the role of clear. Write more demos and feel them, and you will know where to put them. See more documents and more Baidu

clear:both; To be written after the floating element, clear the floating element.

Let me talk about my understanding
clearboth is for itself
So <p style="clear:both"/> means clearing the left and right floats of this element. If it is placed in front, the last floated element will still affect the parent Element

For clear 属性一定要牢记的是：
1） 该属性是针对元素本身的，比如说 A B C 三个浮动元素，想要清除C元素左边的浮动，则是将clearacting on C, it is written:

  C {
     clear : left
  }   
当然你会想，写成
  B {
      clear : right;
  } 

Is that okay? The answer is no. Because clear can only clear the previous float of this element.
"clear on an element only clears the floats before it in document order. It doesn't clear floats after it."

2) There are many ways to clear floats, but the most common and most optimized one is to use pseudo elements:

    Parent :after{
        clear:both;
        display:block;
        content:"";
    }