问答
1. 文档流的概念指什么？有哪种方式可以让元素脱离文档流?
答：
- 文档流就是元素本身在HTML页面渲染中的位置，自上而下的结构
-
float:value,position:absolute,display:none可以使元素脱离文档流
2. 有几种定位方式，分别是如何实现定位的，使用场景如何？
答：
-
position:absolute 绝对定位，相对于最近的非static定位的祖先元素而定位，用于某些需要改变位置的元素
-
position:relative 相对定位，相对于自身的位置而定位，用于一些排版
-
position:fixed 固定定位，相对于浏览器窗口定位，用于导航、广告、侧边栏等
3. absolute, relative, fixed 偏移的参考点分别是什么
答：
-
position:absolute 相对于最近的非static定位的祖先元素而定位
-
position:relative 相对于自身的位置进行偏移
-
position: fixed 相对于浏览器窗口进行偏移
- demo
4. z-index 有什么作用? 如何使用?
答：
- 因为绝对定位与文档流无关，所以相同层级的盒模型会造成覆盖现象从而没有实现想要的效果，这时候可以在有定位的元素上使用z-index属性控制元素的Z轴来调整元素的层级，达到想要的效果。
- demo
5. position:relative和负margin都可以使元素位置发生偏移?二者有什么区别
答：
-
position:relative根据自身做定位处理，并且没有脱离文档流，所以设置偏移后文档流的位置并没有变
- 设置负margin的方法会让其他元素的位置进行改变
- demo
6. 如何让一个固定宽高的元素在页面上垂直水平居中?
答：
- 设置
position:absolute，top:50%，left:50%，margin-left: - 1/2的盒子宽度，margin-top: - 1/2的盒子高度 进行定位，形成页面上垂直水平居中。
- demo
7. 浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
答：
- 浮动元素依据
float:right or left属性设置，依据父元素的边缘限制，形成左右浮动，并且脱离文档流。
- 对于其他浮动的元素，会根据
float:right or left依照方向依次排列
- 对于没有设置浮动的元素，由于设置浮动的元素会脱离文档流，所以在下方的元素会占据原来浮动元素的位置
- 对于文字，会形成文本环绕的效果
- demo
8. 清除浮动指什么? 如何清除浮动?
答：
- 清除浮动是指解决浮动所带来的页面布局的影响，比如：
- 父元素的高度无法被撑开，影响与父元素同级的元素
- 与浮动元素同级的非浮动元素会跟随其后
- 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
- 父元素添加
overflow:auto属性解决父元素高度塌陷的问题
- 通过给不要浮动的元素添加
clear:both可以解决2,3的问题
- 最好看的写法是给父元素添加一个"::after"伪元素标签，相当于在父元素里添了了最后一个子元素，它的目的是为了解决1,2,3的问题
.父元素:after{
content:'';
display:block;
clear:both;
height:0;
visibility:hidden;
}
