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

• 特征：浮动元素的框可以向左或者向右移动，直到它的外边缘碰到父元素包含框或者另一个浮动元素的边框为止；浮动元素不在文档普通流之中，因此文档普通流中的块级元素感知不到浮动元素的存在。

• 对父容器的影响：浮动元素脱离文档流向左或者向右移动，直到边框碰到父元素的边缘。

• 对其他浮动元素的影响：浮动元素都向某个方向移动，直到其边框碰到其他元素的边框，如果包含框太窄，无法容纳多个浮动元素，那么其浮动元素向下移动，直到拥有足够的空间，如果浮动元素的高度不同，那么它们向下移动时可能被其他浮动元素卡住。

• 对普通元素的影响：没有什么影响，普通元素感知不到浮动元素的存在。但是普通元素的文字会受到影响。

• 对文字的影响：浮动元素旁边的文字框被缩短，从而给浮动元素留出空间，文字框围绕浮动元素。

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

• 在非IE浏览器（如Firefox）下，当容器的高度（height）为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

1. 最后添加一个空标签非浮动元素，利用clear:left, righ,both，来撑开父容器。

2. 利用after伪元素，给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

.clearfix::after {content: ' ';display: block;clear :both;
}

三、有几种定位方式？分别是如何实现定位的？参考点是什么？使用场景是什么？

1.absolute定位，通过left/top/right/buttom。偏移的定位点应该是非static值的position属性。然后检查该父元素是否具有position属性，若具有position属性，则以该父元素为参考点进行偏移，若不具有则继续往上一级找，直到body标签为止。使用场景是需要相对于父元素或者body进行定位。

2.relative定位，通过left/top/right/buttom。偏移的参考点是自身位置，是拿偏移前的位置与偏移后的位置进行比较，比如top10px，表现出来的其实是向下移动10px。使用场景是偏移前的位置需要保留，不脱离文档流。

3.fixed定位，通过left/top/right/buttom。偏移的参考点是浏览器窗口。使用场景是固定于浏览器的某个位置不动。

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

因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。

z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。

z-index属性适用于定位元素（position属性值为 relative 或 absolute 或 fixed的对象），用来确定定位元素在垂直于显示屏方向（称为Z轴）上的层叠顺序，就是说如果元素是没有定位的，对其设置的z-index会是无效的。

五、如果用了浮动，其父元素一般(最好)需要清除浮动。如果用了绝对定位，一般(最好)要给参考点设置position:relative

作者：徐金俊
链接：https://www.jianshu.com/p/688b755bdf2f