这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天
定位布局：
1.用于实现网页位置中元素任意位置的摆放
2.元素不会随着页面的滚动而改变
3.实现层叠布局和交叉布局
四种定位：
1.绝对定位（absolute） 2.相对定位（relative） 3.固定定位（fixed） 4.粘滞定位（sticky）
绝对定位：
position：absolute
1.开启绝对定位以后，元素会原地漂浮起来
2.会强制进行类型转换为一个块元素
3.会提升层级，层级高于浮动
4.多个元素设置定位，后面的元素层级会比前面的层级高
5.定位元素位置调整：left：，right：，top：，bottom：，距离页面的距离 同时设置right和left 只会生效left
绝对定位的圆点：
距离他最近的一个包含块元素或者是body
包含块：
给元素加position不为static ；一般加：relative
相对定位：
position：relative（一般作为绝对定位的参照物）
1.位置偏移的参照物为自身 不改变文档布局
2.相对定位设置后会提升层级
固定定位：
position：fixed
1.参照物永远是浏览器窗口
粘滞定位：
position：sticky
1.可以在元素达到某个位置的时候进行固定定位 top：100px 到达100px是固定住
只能改变定位层级：
z-index 默认值为0 值小于0时比文档流层级还低
浮动布局：
float 可选值：left right
1.需要3个或者多个盒子水平排布
2.需要盒子一左一右排布
3.浮动的层级比普通元素更高
注意：无空格间隙
1.开启浮动元素过后，元素会强制类型转换为块元素。
2.不支持margin：auto居中。
3.也不支持text-align：center居中
4.设置浮动后元素会脱离文档流，不占据文档流中的位置
5.两个元素同时设置，两个元素都会水平排布，同时脱离文档流，后面文档流中的元素会被覆盖
6.浮动只影响后面的元素，不影响前面的元素
7.浮动元素可以检测到文字
8.子元素设置浮动时，会检测不到高度导致高度塌陷 解决：1.手动设置高度 。2.让父元素成为一个bfc 。如何创建bfc：（1.float的值不为none 2.position的值 不为static或者relative 3.display的值为：inline-block，table-cell，flex 4.overflow的值不为visible） 3.利用clear属性清除浮动。（可选值：none both清除两边浮动 left 清左边 right清右边）4.添加一个幽灵元素clear：both 父元素设置伪类清除浮动
伪类清除浮动写法：
父元素+:after{content:"";display:block;clear:both;}
