float深入學習筆記

float的設計初衷： 僅僅是爲了實現文字環繞效果

float的感性認知：

包裹性：
1. 收縮：元素應用了float後，寬度收縮，緊緊地包裹住內容（即元素的寬度收縮到元素內的內容的寬度大小）
2. 堅挺：原來沒有高度，但元素應用了float後，元素的高度突然擴展到內容的高度大小
3. 隔絕：元素應用了float後，盒子裏面的內容發生了任何事情，都與盒子外的內容無關（BFC）
破壞性：
1. 子元素應用了float後，父容器塌陷：父容器的高度變爲0

具有包裹性（BFC特性）的其他屬性：

1. display: inline-block/table-cell
2. position: absolute/fixed/sticky
3. overflow: hidden/scroll

具有破壞性的其他屬性：

1. display: none
2. position: absolute/fixed/sticky

清除浮動：

.clearfix:after{
    content: '';
    display: table;
    clear: both;
 }
 .clearfix{ *zoom: 1; }

切記，.clearfix 只需應用在浮動元素的父級元素上 浮動的特性：
1. 元素block塊狀化（磚頭化）
2. 破壞性造成的緊密排列特性（去空格化）