浮动和定位

浮动

float:none/left(左浮动)/right(右浮动)

浮动产生的影响

1.自身父元素无法获取宽高
2.后续元素会自动补位，浮动的元素会覆盖后续补位的元素
3.浮动会自动脱离当前文档流，覆盖标准流元素
4.auto会失效
5.块元素可以横排显示，失去独占一行的特性
6.行元素可以设置宽高
7.除了auto外，依然支持margin
8.提升半个层级，z-index
未添加浮动代码：


添加浮动后的代码：

清除浮动

1.给父级设定宽高
缺点：父级如果作为容器，直接写死，后续元素添加出现问题，而且无法解决元素重叠问题
2.使用overflow:hidden;属性（给父元素添加）
缺点：如果内容需要超出，或者较多时，需求发生冲突
如果内容没有超出，推荐使用。较为方便
3.使用clear:both;属性
clear(是否允许浮动):left(不允许左浮动)/right(不允许右浮动)/both(不允许两侧浮动)
缺点：需要写一个空标签来绑定clear属性，这个空标签没有html作用，不符合html标签语义化
添加clear属性前的代码：


添加之后：


4.给父级设置display:inline-block;
缺点：父元素同级之间会留有间隔，内联块会围绕着浮动元素
5.这是各大浏览器之间，兼容性最高的一款
:after伪类——在。。。之后添加。。。
代码：

显示效果：

定位

定位分为相对定位(relative)，绝对定位(absolute)，固定定位(fixed)和默认状态(没有定位,static)

相对定位 relative

语法：开启：position:relative; 修改位置:left:xxpx;top:xxpx;
相对定位相对的是自身原有的位置
相对定位移动后，原有位置会保留
不会影响文档流
适用于小范围移动和移动后原有位置不再使用的情况

绝对定位

语法：position:absolute;修改位置：left:xxpx;top:xxpx;
绝对定位会脱离当前文档流，父级无法获取宽高
绝对定位参考对象为具有相对定位属性的父元素，如果没有则继续向上找，知道整个文档
90%以上的绝对定位使用场景，都需要相对定位来配合
适用场景：
1.大或小范围移动同样适用，但是需要其父元素配合
2.动态去拖拽元素时，或者一些需要重叠的动画效果

固定定位

语法：position:fixed;
相对于当前浏览器窗口

auto

根据自身所占位置，自动居中
自身必须有宽高
inline-block或float都会使auto失效，需要填写具体值来调整元素位置
代码：

显示效果：

z-index

z-index用于调整当前元素的层级

注意：
1.属性值无单位，致谢数字，以分号结尾
2.调整元素过多时，需要将每个元素层级划分清楚

overflow

overflow 用来处理内容超出容器

属性值：
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 超出部分隐藏
scroll 无论内容超出与否，生成滚动条
auto 内容超出会自动生成滚动条
inherit 规定应该从父元素继承 overflow 属性的值。
代码：

显示效果：