CSS脱离文档流

浮动

用float属性定义元素
left值为元素向左浮动
right值为元素向右

浮动的东西可以脱离文档流
浮动只有左右浮动，没有上下

浮动就相当于多了一个图层，经常会出现折叠现象，解决了很多遇到的 问题

所有的浮动元素在一层，标准流在一层，只有两层

清除浮动

当元素设置float后，该元素会脱离文档流
浮动的元素会造成父元素高度塌陷
后续的元素也会受到影响
所以这时候要用的清除浮动

清除浮动的方式：

• 父元素设置高度
• 受影响的元素增加clear属性
• overflow清除浮动
• 伪对象方式

父元素设置高度

直接在父元素里面添加一个高度height

效果为父级元素高度固定

受影响的元素增加clear属性（常用）

给受到影响的元素增加一个clear：both

overflow清除浮动（常用）

父级元素不能设置高度，然后给父级元素添加overflow：hidden
以及clear：both

效果为父级元素被子元素撑开

伪对象方式

为父级元素添加伪类after，设置空的内容，并且使用display：block和clear：both
父级元素也不能设置高度

 .container::after{
            content: "";
            display: block;
            clear: both;
       	    }

定位

想定到哪就定到哪
position属性指定定位类型
值为relative 相对定位
值为absolute 绝对定位
值为fixed 固定定位
然后通过left、top，right，bottom属性调整位置

其中绝对定位和固定定位会脱离文档流

相对定位和绝对定位会基于父级的位置调整，如果父级不存在定位，会基于文档定位，如果父级有定位，会基于父级移动，一般父级定位是relative

相对定位（relative）

相对定位不会脱离文档流

绝对定位（absolute）

脱离文档流并且调整位置
绝对定位有很多层，标准流是一层，每一个绝对定位都是一层

固定定位（fixed）

固定定位定位的元素会随着页面的滑动固定在屏幕上面，一般固定定位只会用一次

Z-index

z-index属性用来设置元素的堆叠顺序，值高的元素总会处于值低的元素的上方