浮动&定位

1、浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响？

浮动盒不在普通文档流内，在浮动盒之前或之后创建的未定位的块盒会竖直排列，就像浮动不存在一样，然而接着浮动盒创建的当前及后续的行盒会进行必要的缩短，为了给浮动盒让出空间。

浮动元素对父容器的影响：由于浮动元素脱离了普通文档流，其父容器在计算宽高的时候发现不了浮动元素，故浮动元素无法撑开父容器，如：某块级容器中子元素全部为浮动元素，则父容器高度为0；

浮动元素对其他浮动元素的影响：浮动元素向左或向右浮动，直到其外边缘挨到包含块边缘或另一个浮动元素的外边，但有时后续浮动的元素会被前一个浮动元素的边缘卡住；

浮动元素对普通元素的影响：普通元素无法发现浮动元素，故在解析渲染页面的时候，普通元素会忽视浮动元素的存在，按照html正常规则去渲染页面，此时就会出现普通元素被浮动元素覆盖；

浮动元素对于文字的影响：普通元素无法发现浮动元素，但是文本可以发现，故文本会紧挨着浮动元素边进行渲染，包围在浮动元素的周围。

2、清除浮动指什么？如何清除浮动？ 两种以上方法。

清除浮动是指通过某种手段设置，使后续文档流元素能正常给浮动元素让出位置按html渲染规则正常渲染页面，同时使得浮动元素父容器被撑开，实现元素浮动的同时又不脱离文档流的效果，这就是清除浮动。

清除浮动的方法：

a. 在浮动元素后添加一个块级空元素，通过加上clear:both;属性将其顶部设置到浮动元素的下方，实现清除浮动；

b. 为浮动元素父容器中尾部添加伪元素，设置伪元素为block及clear:both;来实现清除浮动。

两种方法其本质都是在浮动元素后加入一个内容为空的块级元素，来实现浮动元素与后续普通元素的分割，不至于浮动元素与后续的重叠，同时撑开父容器。

3、有几种定位方式？分别是如何实现定位的？参考点是什么？

常见的主要有以下五种定位方式：

a. 静态定位：html默认定位，基本语法`position:static;`， 

b. 相对定位：相对于默认位置进行定位，定位后位置相对默认位置发生相应偏移，但占据文档流的位置不会发生改变，定位元素没有脱离文档流；

c. 绝对定位：相对于祖先元素中具有position:relative/absolute/fixed定位之一的祖先进行定位，定位元素完全脱离文档流；

d. 固定定位：相对于浏览器窗口进行定位，定位元素始终处在窗口某个固定位置，代码格式：`position:fixed;`；

e. sticky定位：相对定位和固定定位的结合，默认情况下表现为相对定位，在页面中正常展示，当浏览器窗口顶部与元素的距离等于top属性的值时，转为固定定位；代码格式：`position:sticky;`。

4、z-index有什么作用？如何使用？

z-index用来设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于低堆叠顺序的前面。

使用方式：只有在使用了position并脱离了文档流的情况下可以使用，其他情况下使用z-index不起作用；

语法格式：z-index:auto | number | inherit  默认|数字|继承父元素z-index

a. 对于脱离文档流的同级元素，不设置z-index情况下后面元素会覆盖前面元素；

b. 对于脱离文档流的同级元素，设置了z-index后，z-index大的会覆盖z-index小的元素；

c. z-index为auto的元素不参与层级关系的比较，由向上遍历至z-index不为auto的元素来进行比较。