CSS中浮动和定位的总结

浮动

浮动用法：

float:left | right

浮动特点：

1、设置了浮动的元素，脱离了标准流（脱标）

2、设置了浮动的元素，该元素不占原来的位置

3、设置了浮动的元素，会影响该元素的后面的元素

4、设置了浮动的元素，也会实现模式转换

浮动的作用：

1、浮动最初的作用：实现文字图片环绕效果

2、可以让块级元素在一行上显示。

3、制作网页导航

4、网页布局（div+css）

清除浮动的三种方案

第一种：使用clear: left | right | both

第二种：给父元素设置overflow:hidden;

第三种：采用伪元素清除浮动,如下代码：

.clearfix:after {
    content: "";
    height: 0;
    line-height: 0;
    display: block;
    clear: both;
    visibility: hidden;
}

.clearfix {
    zoom: 1;
}

清除浮动的条件：

1、页面中父元素没有设置高度
2、该父元素中所有的子元素都设置了浮动

定位：

定位的分类：

1. 静态定位（static）
2. 绝对定位 (absolute)
3. 相对定位（relative）
4. 固定定位 （fixed）

静态定位（static）

静态定位的盒子与网页中标准流下的显示方式一样。

相对定位（relative）

相对定位的元素会以元素本身的设置定位。

相对定位的元素特点：

相对定位没有脱标
相对定位的元素占位置
相对定位不能进行模式转换

绝对定位 (absolute)

绝对定位的元素位置特点：

当一个子元素的父元素没有设置定位，子元素设置绝对定位后，该子元素会以body左上角为基准设置定位。

如果一个元素的父元素设置了定位，那么子元素设置绝对定位的时候，会以父元素左上角为基准设置定位。

绝对定位的元素特点：

绝对定位的元素脱标
绝对定位的元素不占位置
绝对定位的元素可以进行模式转换

记住重要的一点：子绝父相

固定定位 （fixed）

设置元素为固定定位时候，该元素只会参照浏览器可视区域左上角设置定位。

固定定位的特点：

元素设置固定定位后脱标
脱标的元素不占位置
可以进行模式转换