浮动定位
1. 将元素排除在普通流之外
2. 元素不在页面中占据空间
3. 将浮动元素放置在包含框的左边或者右边
4. 浮动元素依旧位于包含框之内 浮动的框可以向左或者向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止
5. 浮动元素的外边缘不会超过其父元素的内边缘
6. 浮动元素不会互相重叠
7. 浮动元素不会上下浮动
8. 任何元素一旦浮动，display属性将完全失效可以设置宽高，并且不会独占一行
规则
1. 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素退出。比如行内级元素、inline-block元素、块级元素的文字内容（图文环绕）
2. 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐
3. 如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界
4. 浮动元素之间不能层叠
- 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）
- 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止
5. 浮动元素的顶端不能超过包含块的顶端，也不能超过之前所有浮动元素的顶端
浮动的问题
1. 由于浮动元素驼脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度
2. 导致了父元素高度坍塌的问题
3. 解决父元素高低坍塌问题的过程，一般叫做清浮动（清理浮动）
清理浮动的方法
- 设置父元素高度
- 扩展性不好
- 让父元素浮动
- 可能导致页面中的所有元素都浮动
- 父元素脱离了标准流
- 让父元素成为绝对定位元素（position设置为absolute或fixed）
- 在父元素最后增加一个空的块级子元素，并且让它设置clear：both
- 给父元素增加::after伪元素
.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
clear
一般就只用在非浮动的元素上，可以让非浮动元素与浮动元素不层叠
- left： 要求元素的顶部低于之前生成的所有左浮动元素的底部
- right： 要求元素的顶部低于之前生成的所有右浮动元素的底部
- both: 要求元素的顶部低于之前生成的所有浮动元素的底部
- none: 默认值，无特殊要求
定位方案对比
image.png
