关于 CSS浮动、定位

---

1.文档流的概念指什么？有哪种方式可以让元素脱离文档流?

大概就是元素没有浮动（float）或者绝对定位(position)的情况下，从左到右，从上到下排列的正常布局方式，可以显示布局时所占用的位置。
脱离文档流的方法有:

• float
• position
  1.position:fixed
  2.position:absolute

2.有几种定位方式，分别是如何实现定位的，使用场景如何？

position	描述	使用场景
static	静态定位	默认
fixed	固定定位	广告，要求一直在页面上，就算滚动也在那个位置
relative	相对定位	需要根据自身进行偏移的时候（但不脱离文档流）
absolute	绝对定位	需要定格在某个位置上

3.absolute, relative, fixed 偏移的参考点分别是什么

position	参考点
absolute	选取最近一个已定位的父元素作参考点，倘若没有就选取Body坐标原点作为参考点
relative	自身的位置
fixed	浏览器的可视边框

4.z-index 有什么作用? 如何使用?

可以设置元素的堆叠顺序 值越大顺序越高（只可在定位的时候使用）
使用 只能在定位元素上使用
转载：

• 堆叠顺序
  • 不对元素设position时，文档流后面的元素覆盖前面的元素。
  • 将元素设置的position设置为relative ，absolute 或者 fixed，元素会覆盖没有设置 position 属性或者属性值为 static 的元素。
  • 一般情况下z-index值越大者在前面。
  • 子元素继承元素的堆叠关系，不论子元素的z-index值比父元素的兄弟元素大或者小，都继承父元素与其兄弟元素的堆叠关系。

5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别

• position:relative 无论发生怎样的偏移 元素还是在原来的位置上
• 负margin 元素发生偏移时，其元素位置也发生改变，同时带动其他元素的位置改变

6.如何让一个固定宽高的元素在页面上垂直水平居中?

假设width:100px height:100px

1. 先让元素绝对定位-- position:absolute
2. margin宽高设置为负固定宽高的1/2 -- margin-top: -50px margin-left:-50px

3. left和top分别设置为%50 --left:50% top:50%

   
   固定宽高垂直水平居中的方法.png

7.浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?

1. 脱离文档流
2. 文字会环绕图片
3. 可以从左或者从右浮动，直至触碰元素边框或者容器边框（border）

影响

• 对其他浮动元素影响
  如果是同方向，紧挨其边框 如果超过容器容量，会换行继续
• 对普通浮动元素的影响
  无视浮动元素，取代浮动元素的位置，并从左到右，从上到下排列
• 对文字影响
  文字会环绕浮动元素

8.清除浮动指什么? 如何清除浮动?

用于清除浮动对其他元素的影响
clear:both/left/right

---