我的前端学习笔记10——浮动与定位

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

• 文档流指的是元素没有浮动和绝对定位是的正常的布局方式。块级元素从上到下排列；行内元素从左到右排列，如果整行就换行排列。

---

• 可以让元素脱离文档流的方式有：

1. 定位 （包括absolute和fixed定位。）
2. 浮动

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

• 定位方式:

1. position:static：代表元素没有定位，元素正常出现在文档流中。
2. position:absolute：代表绝对定位，相对于除position:static外的第一个父元素进行定位。如果父元素没有position，则继续向上寻找。元素的位置通过top/bottom/right/left属性进行定位。（脱离文档流）如果没有父元素，位置是相对于body来进行的。若父元素有定位（position设为relative、absolute或fixed），则相对于父元素定位。绝对定位会使元素从文档流中被删除，结果就是该元素原本占据的空间被其它元素所填充。
3. position:relative：生成相对定位元素，相对其原始位置进行定位。（不脱离文档里）
4. position:fixed：生成绝对定位元素，完全脱离文档流，相对于浏览器窗口进行定位，不受页面滚动的影响，效果类似与网页小广告。通过top/left/right/bottom属性进行定位。

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

• absolute：参考父级定位，如果父级没有片position，则继续向上寻找定位，如果没有position，则参考body进行定位。一般如果想给absolute一个参考，在它的父级加position:relative。（对父级无任何影响）
• relative：参考原来位置进行定位。适合原位置进行微调。
• fixed：参考浏览器窗口进行定位。

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

• z-index作用：对定位元素（除static）用来控制层叠元素的显示优先级，值越大越优先，如果没有设置，则默认靠后者优先。
• 父子关系处理
  1.如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，会在父元素上方
  2.如果父元素z-index失效（未定位或者使用默认值），那么定位子元素的z-index设置生效
• 兄弟之间子元素
  如果兄弟元素的z-index生效，那么其子元素覆盖关系由父元素决定

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

margin是边距,说白了就是把其他东西向外/里挤,它们的宽/高度都算在所属元素的实际里面,不能算是移动；positon是相对元素(relative)或者浏览器(absolute)的定位,也就是移动。
另外，position:relative后，元素原有的空间仍被占据，后面的元素不会挤占；但负margin后后面的元素会一起移动。

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

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

• 浮动就是使元素脱离文档流，不占用文档流位置。
  同向浮动，其他浮动元素跟在其后，满行换行。普通元素围绕浮动元素。文字围绕浮动元素。
• 影响：

1. 对其父元素的影响
   对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷
2. 对其兄弟元素（非浮动）的影响
   如果兄弟元素为块级元素，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。
   如果如果兄弟元素为内联元素，则元素会环绕浮动元素排列。
3. 对其兄弟元素（浮动）的影响
   同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面
   反方向的浮动元素：互不影响，位于同一条水平线上，当空间不够时会被挤下
4. 对子元素的影响
   当一个元素浮动时，在没有清除浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下，使自身的宽度从100%变为自适应（浮动元素display:block）。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。

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

• 在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
• 清除浮动方法：
  1、使用带clear属性的空元素
  在浮动元素后使用一个空元素如
  ，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用
  或

  ---

  来进行清理。
  2、使用CSS的overflow属性
  给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
  3、给浮动的元素的容器添加浮动
  给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。
  4、使用邻接元素处理
  什么都不做，给浮动元素后面的元素添加clear属性。
  5、方法五：使用CSS的:after伪元素
  给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
  需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。