浮动 定位

文档流

• 概念
  文档流是文档中可显示对象在排列时所占用的位置
  行内元素从左到右，块级元素从上到下显示
• 脱离方式
  浮动(float)
  绝对定位(absolute)
  固定定位(fixed)

定位方式

• 相对定位(relative)
  生成相对定位的元素，元素没有脱离文档流，元素的位置相对于自己在文档流中原来的位置，元素位置偏移，后面其他元素位置不变 ，无论是否进行偏移，元素仍然占据原来的空间，偏移元素会导致它覆盖其它元素
  使用场景：一般和absolute一起使用

• 绝对定位(absolute)
  生成绝对定位的元素，元素脱离文档流，相对于static定位以外最近的一个祖先（父）元素进行定位,如果没有则相对于原始的容器。元素的位置通过 left, top, right以及 bottom属性进行规定。
  使用场景：一般和absolute一起使用

• 固定定位(fixed)
  生成绝对定位的元素，元素脱离文档流，相对于浏览器窗口进行定位。元素的位置通过 left, top, right以及 bottom属性进行规定。它的特点是不会随页面滚动而移动(很像绝对定位，但它不随着页面滚动而移动，绝对定位会移动)。可以通过z-index进行层次分级。
  使用场景：导航元素，广告窗口

偏移参考点

• absolute相对于 static 定位以外的第一个父元素进行定位
• relative相对于其正常位置进行定位
• fixed相对于浏览器窗口进行定位

z-index

• 作用对于定位元素（非static），z-index用来控制层叠元素的显示优先级
• 使用值越大，显示优先级越高

position:relative和负margin

• position:relative初始位置不变，不会影响其他元素
• 负margin会影响其他元素
  

固定宽高的元素 垂直水平居中

1 用position:absolute属性，使元素的左上角在页面上垂直居中
2 用负margin属性，使元素相对于自身位置偏移，把正中心移到左上角的位置

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

• 特征
  1 元素浮动之后会从文档正常流中删除
  2 元素设置浮动后，会尽向左或向右浮动，直到碰到父元素边框或其余浮动元素
  3 任何元素设置浮动后都会变成块级元素
  4 浮动元素不会互相重叠
  5 如果没有足够空间，浮动元素会被挤到新的一行

• 影响
  其他浮动元素：会依次排在浮动元素的左边或右边，直到其父元素宽度不够，将会被挤到下一行
  普通元素：其后的普通元素将会占据其原来位置
  文字：会让出浮动元素的位置，形成环绕效果

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

• 定义
  清除浮动是指清除浮动所带来的影响，比如由于浮动，父元素无法撑起高度，影响与父元素同级的元素；与浮动元素同级的非浮动元素会紧随其后；若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响布局

• 解决
  通过clear属性
  清除浮动并不是说让浮动元素回到文档流
  清除浮动只会改变改元素自身的位置，并且只针对排在该元素前面的元素。目的是让自己的左边或者右边没有浮动元素举个例子

9 高度坍塌

• 定义
  当没有指定高度的父元素中的子元素全部都浮动时，父元素中内部高度因为是普通流中的块元素撑起来的，所以这个时候父元素的高度会变成0.或者会有部分浮动元素的位置会超出父元素的高度之外。这种现象，叫做高度坍塌。

• 解决
  使用:after伪元素
  原理是在浮动元素最末尾添加一个元素，如果该元素位于浮动元素后面，并且没有浮动，那么父元素的高度就会重新获取