浮动、定位

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

• 文档流是文档中可显示对象在排列时所占用的位置。
• 文档中的行内元素在一行中依次水平排列，块级元素依次上下排列形成文档流。

• 设置元素绝对定位（position:absolute）和（position:fixed）的时候，元素脱离文档流。
• 设置元素浮动（float）也可以让元素脱离文档流。

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

1.position:absolute，生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
2.position:relative，生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
3.position:fixed，生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

示例代码
原始位置 定位后的位置

三、absolute, relative, fixed 偏移的参考点分别是什么？

1.absolute的偏移参考点是第一个设置了定位属性的父元素。
2.relative的偏移参考点是相对于自己之前的位置进行定位移动。
3.fixed的偏移参考点是相对于浏览器的窗口进行定位的。

四、z-index 有什么作用? 如何使用?

• z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面。
• 元素可以拥有负的z-index属性值。
• z-index仅能在定位元素上使用生效。

使用示例

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

1.position:relative 是元素相对于自己以前的位置进行偏移，移动的是自己的位置，对其他元素位置并没有造成影响。
2.当元素使用负margin进行位置偏移的时候，不仅自己的位置发生改变，还会改变改变跟自己相邻的其他元素的位置。

示例

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

1.通过对该元素设置position:absolute和负margin属性实现。

示例

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

1.特征：

• 浮动元素可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
• 浮动元素脱离文档流，不占用文档空间。

2.影响：

• 同是浮动元素的话，会依次根据浏览器渲染的顺序上下或者左右浮动。

示例

• 普通元素会占用浮动元素之前的位置。

示例

• 浮动元素会被文字环绕。

示例

八、清除浮动指什么? 如何清除浮动?

1.清理浮动元素给其他元素带来的影响。浮动的元素不占用文档流，因此会对其他的元素产生影响，破坏页面布局。用浮动布局页面可以达到想要的效果，但是带来的副作用也要清楚干净。
2.清除浮动的方法：

• 在浮动元素后面添加块级元素，并设置属性clear:both。

示例

本教程归本人所有，转载需说明来源！