浮动 float

浮动定位

1. 将元素排除在普通流之外
2. 元素不在页面中占据空间
3. 将浮动元素放置在包含框的左边或者右边
4. 浮动元素依旧位于包含框之内 浮动的框可以向左或者向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止
5. 浮动元素的外边缘不会超过其父元素的内边缘
6. 浮动元素不会互相重叠
7. 浮动元素不会上下浮动
8. 任何元素一旦浮动，display属性将完全失效可以设置宽高，并且不会独占一行

规则

1. 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素退出。比如行内级元素、inline-block元素、块级元素的文字内容（图文环绕）
2. 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐
3. 如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界
4. 浮动元素之间不能层叠
    - 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）
    - 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止
5. 浮动元素的顶端不能超过包含块的顶端，也不能超过之前所有浮动元素的顶端

浮动的问题

1. 由于浮动元素驼脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度
2. 导致了父元素高度坍塌的问题
3. 解决父元素高低坍塌问题的过程，一般叫做清浮动（清理浮动）

清理浮动的方法

1. 设置父元素高度
   • 扩展性不好
2. 让父元素浮动
   • 可能导致页面中的所有元素都浮动
   • 父元素脱离了标准流
3. 让父元素成为绝对定位元素（position设置为absolute或fixed）
4. 在父元素最后增加一个空的块级子元素，并且让它设置clear：both
5. 给父元素增加::after伪元素

        .clearfix::after {
            content: "";
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
        }
        .clearfix { 
            *zoom: 1;
        }

clear

一般就只用在非浮动的元素上，可以让非浮动元素与浮动元素不层叠

• left： 要求元素的顶部低于之前生成的所有左浮动元素的底部
• right： 要求元素的顶部低于之前生成的所有右浮动元素的底部
• both: 要求元素的顶部低于之前生成的所有浮动元素的底部
• none: 默认值，无特殊要求

定位方案对比

image.png