浮動會使元素盡量向左或向右移動，直到碰到包含框或另外乙個浮動元素的盒子模型的邊緣
包含框並不會改變裡面浮動元素的寬高，浮動元素寬高不會限制在包含塊以內
塊1
上例中，block1會保持500px的寬度，但container並不會移動位置讓block1顯示完全，container位置不會變，block1超出container部分會繪製到瀏覽器左側以外看不到
把float改為left，就可以清晰看到block1超出container邊框
但是，浮動元素會盡量使自己繪製在包含框內
以下block2會另起一行，而不是接著block1，因為另起一行會使block2超出包含框少一點
塊1 塊2
塊級浮動元素的寬高如果不設定，他們的寬高就由內容決定（類似內聯元素），這個跟普通塊級元素不一樣（普通塊級元素寬會充滿父元素，高由內容決定）
包含塊的高度如果不設定，裡面全部是浮動元素的話，因為浮動元素時脫離文件流的，就會出現高度為0的情況，即高度塌陷
比如：
塊1 塊2
可以在後面加乙個div，使用clear清除浮動，撐起包含塊
塊1 塊2
這種方式比較彆扭，一般使用偽元素解決
::after 偽元素在元素最後新增內容（::begin在元素最前面新增內容）
塊1 塊2
after預設為inline元素，inline元素的clear不起作用，所以要改成block元素同時還要對after設定內容（content，此處只為清浮動，設定內容為空即可），否則無效
元素的包含關係 html
以前 塊級元素可以包含行級元素，行級元素不可以包含塊級元素，a元素除外 現在 元素的包含關係由元素的 內容 類別 決定 例如 檢視h1元素中是否可以包含p元素 不可以 查詢乙個元素可不可以包含別的元素 可以去 mdn web docs 裡面查總結 1.容器元素中可以包含任何元素 2.a元素中幾乎可以...
偽類和偽元素的區別
個人的關注點可能主要集中在js方向上，但是本著css也不能丟掉的原則，所以上網查了些css方面的困惑點，這一篇的主題是 偽類和偽元素。偽類和偽元素的根本區別在於 它們是否創造了新的元素 抽象 從我們模仿其意義的角度來看，如果需要新增新元素加以標識的，就是偽元素，反之，如果只需要在既有元素上新增類別的...
偽類和偽元素的區別
學習這麼長時間對於一些基本點還是不太理解，所以在這裡進行了區分 第一種理解偽類用於向某些選擇器新增特殊的效果。偽元素用於將特殊的效果新增到某些選擇器。第二種理解 偽類的效果可以通過新增乙個實際的類來達到，而偽元素的效果則需要通過新增乙個實際的元素才能達到，這也是為什麼他們乙個稱為偽類，乙個稱為偽元素...