浮动、定位和层级

浮动的概念

浮动的代码

float:left;//左浮动
float:right;//右浮动

浮动的特点

• 浮动的元素会脱离标准流（标准流就是浏览器默认摆放盒子的标准）
• 浮动后的元素会覆盖在标准流之上
• 浮动后的元素会改变显示方式（会变成行内块），可以设置宽高

浮动对页面的影响

如果父盒子中有一个子盒子，父盒子没有设置高度，子盒子浮动，那么父盒子不能被子盒子撑开，即父盒子高度为0，这时下面的盒子会占位。

解决上述问题的方式–清除浮动

方法一：额外标签法（一般不推荐，会额外增加页面标签）

在浮动的盒子之下再放一个标签，在这个标签中使用clear:both,来清除浮动对页面的影响。

又分为外部标签法和内部标签法
外部标签法：

<style>
    .clearfix {
    clear:both;
}
</style>

<div class="father">
    <div class="son"></div>
</div>
<div class="clearfix"></div>
//缺点是父盒子高度依然为0

内部标签法：

<style>
    .clearfix {
    clear:both;
}
</style>

<div class="father">
    <div class="son"></div>
    <div class="clearfix"></div>
</div>

方法二：overflow:hidden（一般也不推荐，元素超出部分会被隐藏）

先找到浮动盒子的父元素，在父元素中添加一个属性overflow:hidden

<style>
        .fateher {
            overflow:hidden;
        }
    </style>

    <div class="father">
        <div class="son"></div>
    </div>

方法二：使用伪元素（开发者的首选）

伪元素：在页面中不存在的元素，可以通过css添加上去，每一个元素都有自己的伪元素
分类：
：before //在…之前添加
：after //在…之后添加

<style>
    .clearfix:after，.clearfix:before {
        content:"";
        height:0;
        line-height:0;
        display:block;
        clear:both;
        visibility:hidden;
    }
    .clearfix {
        zoom:1; /* 兼容ie6*/
    }
</style>

<div class="father clearfix">
    <div class="son"></div>
</div>

后面我还会说到使用伪元素的好处，以及伪元素的妙用等。

---

定位的概念

定位的分类：静态定位（static） 相对定位（relative） 绝对定位（absolute） 固定定位（fixed）
静态定位：position：static所有的标准流默认都是静态定位
相对定位：position:relative 相对于自身定位 定位后的元素不脱离标准流 在页面上依然占据位置
绝对定位：position:absolute 定位后元素脱离标准流 在页面上不占位置
1. 如设置绝对定位的元素没有父元素，就相对于body定位
2. 如果有父元素，但是父元素没有定位，则还是相对于body定位
3. 如果有父元素，而且父元素有定位（非static）,那么这个元素就相对于父元素进行定位
固定定位：position:fixed
不管页面多大，永远相对于浏览器边框定位 定位后元素脱离标准流 在页面上不占位置

---

层级的概念

• 只有定位的元素才有层级 而定位中只有这三个有层级：relative absolute fixed
• 层级的取值范围：0–无穷大（可以取负数但是最好不要用负数 一般0-9999）
• 浮动和标准流的元素都没有层级 浮动是解决块级元素在同一行显示的问题
• 设置层级通过z-index属性 层级越高的显示越靠前