keywords: 定位、浮动、布局、文档流、负margin。
-
文档流的概念指什么？有哪种方式可以让元素脱离文档流?
文档流又称普通流，是元素在html文档中按出现顺序决定其排布顺序的一种方式。元素的position属性为static时，会按照普通流定位。当元素float或使用positoin:absolute、position:fixed时，便脱离文档流。
普通流
float
position:absolute
position:fixed
值得注意的是：当元素（inline或block）脱离文档流时，不论position的值是absolute、fixed，或是使用float，该元素将变为块级元素，但宽度变为auto（仍然可以自定义），即你内容区所需的必要宽度。
-
有几种定位方式，分别是如何实现定位的，使用场景如何？
有四种定位方式：负margin、position:relative、position:absolute、position:fixed。
负margin：通过使用margin-top、margin-right、margin-bottom、margin-left使元素位置发生偏移。
position:relative：生成相对定位的元素，相对于其正常位置进行定位。
position:absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，元素的margin外侧参考参考元素的border内侧进行位移。
position:fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
-
absolute, relative, fixed 偏移的参考点分别是什么。
absolute的参考点是浏览器窗口左上角；
relative的参考点是元素border的左上角；
fixed的参考点是浏览器窗口左上角。
-
z-index 有什么作用? 如何使用?
只有使用了除static 的position，才能使用z-index属性。通过z-index属性可以决定重叠元素中从表层至里层的顺序。
比如当元素浮动时，后面的div会前移，浮动元素遮挡div，通过使用z-index可以使div在最上面完整显示出来。
蓝色被覆盖
div覆盖浮动元素
-
position:relative和负margin都可以使元素位置发生偏移，二者有什么区别。
position:relative和负margin都可以是元素相对原来位置发生偏移，不同点：
relative作用的元素不脱离文档流，后面的元素布局排列不变，就好像relative作用的元素没有移动位置。负margin移动的元素会打乱原有的布局排列，后面的元素会跟随移动。
position:relative
负margin
-
如何让一个固定宽高的元素在页面上垂直水平居中?
对元素使用positon和负margin：
垂直水平居中
-
浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
1、浮动元素脱离普通流；
2、文本围绕浮动元素。
3、假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A会在原地浮动。
4、元素脱离文档流后，会表现得像块级元素。
5、当元素应用了float属性后，将会脱离普通流，其容器（父）元素将得不到脱离普通流的子元素高度。
参考：
对CSS中的Position、Float属性的一些深入探讨
-
清除浮动指什么? 如何清除浮动?
清除浮动是指某个元素左边或右边不存在浮动元素。对元素使用clear清除浮动，可以决定元素的左或右边不存在浮动元素，使该元素向下移动。
清除浮动前
清除浮动后
网友评论