帶有clear屬性的元素寫在浮動元素之前，那它兩側本來就沒有浮動元素，這個屬性沒有任何作用

在 css 文件裡面規定 clear:both 的意思是：

要求框的頂邊框邊低於在來源文件中之前產生的任何浮動框的底外邊距邊。
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.

所以有 clear:both 屬性的元素放在浮動元素之後才能起到閉合浮動的作用。
我一般清除浮動是透過浮動元素的父元素的偽元素實現的。在你這個例子中就是

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

after 偽元素是父元素的最後一個子元素，所以能清除這個區塊裡面的浮動。

先了解float的影響和clear的作用吧。多寫demo，感受感受，就知道放哪了。多看文檔多百度

clear:both;要寫在浮動元素之後，清除浮動。

說說我的理解吧
clearboth 是針對的自身
所以

對於 clear 属性一定要牢记的是：
1） 该属性是针对元素本身的，比如说 A B C 三个浮动元素，想要清除C元素左边的浮动，则是将clear作用在C上， 寫成:

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

行不行呢？答案是不行。因為clear只能清除該元素之前的浮動。
"clear on an element only clears the floats before it in document order. It doesn't clear floats after it."

2） 清除浮動的方式有不少，不過最常見，也是最優化的一種就是使用偽元素：

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