# You’ll float too!! Float浮動元素 ###### tags: `想知道嗎？ / 讀書會` --- ### 自我介紹 沈舫竹 Cathy  ---  Note: float排版方式為，左右移動，直到碰觸到包含塊邊界(外層容器），或是另一個浮動元素邊緣，與絕對定位不同。 ---  Note: float沿著包含快左右兩側浮動，元素為左浮動，其餘內容會沿著元素右側排列。若內容寬度超過包含塊邊界，則會依序向下排列。 ---  Note: float對齊當前該行的line box頂端。 ---  Note: 左浮動元素與右浮動元素並不會相互重疊，若這兩個浮動元素寬度大於包含塊邊界，則會依序向下換行。 ---   Note: **我先設定一個div將兩個元素包在一起，藍色元素下float left** float影響後面的元素，當受影響的元素加上clear屬性，即可清除浮動，讓父元素恢復至原本高度。但若是將順序兩者html順序調換，清除浮動則沒有效果。 --- ### 清除浮動(clearing float) ### V.S ### 閉合浮動(enclosing float) ---- - **清除浮動:** 直接在元素上加上clear來還原float所造成的高度塌陷問題。 - **閉合浮動:** 新增可觸發BFC的元素。 Note: 讓容器將其包覆起來，將原本該有的高度長出來。 ---- --- ***與inline-block的差異：***  Note: float具有方向性（ltr or rtl) 而 inline-block不具方向性（固定為ltr) --- 謝謝大家聆聽  ---