浮动&定位

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

浮动元素脱离文档流，在当前行的左边或是右边对齐，如果当前行没有足够的空间，它将下移一行，直到有足够的空间。浮动元素以父元素或上一个块级元素为参考确定位置，需要计算margin。其他的块状元素本身会按原来的布局方式排列，但是内联元素和文字会被浮动元素及其外边距挤开到相反的方向。
详细DEMO在这里：http://js.jirengu.com/wojid

对于父元素：

• 浮动元素不在正常文档流中，不能撑开父元素。
• 如果父元素没有做清除浮动，那么浮动元素有可能超出父元素的范围。

对于其他浮动元素：

• 浮动元素按顺序依次布局，按方向依次排列，如果本行空间不足则自动移动到下一行开头。
• 所有的浮动元素应该在同一高度，即使是不同父元素的浮动元素，在布局时依然会相互影响错开位置。

普通元素和文字：

• 块状元素本身按浮动元素不存在排列。
• 内联元素、文字、块状元素内的文字和inline元素会被浮动元素挤开，在浮动元素的外边距外排列。

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

因为元素的浮动定位非常复杂，为了简化布局方便计算，我们要注意在适当的地方清除浮动。

清除浮动的6种方法:

1. 伪元素法
2. 额外标签法
3. 父元素定高
4. 父元素浮动
5. 父元素overflow: hidden;
6. 父元素绝对定位

清除浮动的6种方法

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

1. 一般默认position: static; 正常文档流定位方式。position属性除了这个值以外都可以给后代元素提供定位参照。
2. position: relative; 相对定位：以正常文档流定位位置为参照，移动后原位留空。这个属性一般就是用来给后代元素提供参照，也可以用作不影响文档流的微调。
3. position: absolute; 绝对定位：脱离正常文档流，以最近的提供定位的（即position不为static）祖先元素或body为参照。因为脱离文档流，原位置会被后面的元素占用。
4. position: fixed; 固定定位：表现方式与absolute相同，区别在于fixed是以浏览器窗口为参照的。fixed定位常用于顶部导航、侧边导航等不希望随网页滚动的功能区。
5. position: sticky; 粘性定位：当元素未达到预定位置时表现同relative，当元素到达预定位置后表现同absolute，但是后续元素按此元素原位置计算。CSS3实验中的功能，参看MDN文档中的介绍，caniuse兼容情况

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

z-index定义了元素的堆叠层级。简单说立体几何中将空间划分为三维，用三根数轴表示。对应到电脑屏幕，从左至右为增x，从上到下为增y，从屏幕指向用户为增z。所以z轴的数值越大，相对于用户越近，用户看来就是越在最上面。
z-index只能取整数，但是可以取负数。元素创建后默认层级都为0，后来的元素堆叠在前面的元素上方。
z-index需要参考父元素的层级。父元素层级高的，子元素层级自然也高。想象两个箱子里装着两个小盒子，如果A箱子在B箱子上方，那么不管B箱中的小盒子放得再高，也不可能高过A箱。
z-index可以应用在很多地方，有时后出现的模块比较重要，就可以修改它的z-index值让它出现在上面。比如mask、dialog、message_box都可以设置很高的z-index值。