浮动、定位

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

将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。也就是文档中可显示对象在排列中所占用的位置，比如块级元素默认占据一行。
浮动float以及定位中的绝对定位position:absolute和固定定位position:fixed都可以让元素脱离文档流。

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

1. position:static：默认属性，没有设置定位的都是该定位，元素不会有特殊偏移位置。
2. position:relative：相对定位，相对于自己原来的位置进行定位，元素不会脱离文档流。
   相对定位.png
3. position:absolute：绝对定位，相对于父容器上拥有定位的元素位置定位，如果父级没有定位则逐级向上查找，元素脱离文档流。
   绝对定位.png
4. position:fixed：固定定位，相对于浏览器窗口进行定位。
   固定定位.png

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

position:relative：相对于自己原来的位置进行定位，元素不会脱离文档流。
position:fixed：固定定位，相对于浏览器窗口进行定位。
position:absolute：绝对定位，相对于父容器上拥有定位的元素位置定位，如果父级没有定位则逐级向上查找，元素脱离文档流。

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

z-index设置元素的堆叠属性，拥有更高堆叠顺序的元素总是会处在上面，该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。只有在对元素进行了定位之后才可以设置元素的z-index属性。

z-index属性.png

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

负margin就是把边距属性设置为负数，设置margin-bottom margin-right时元素本身不会发生位置偏移，设置margin-left margin-top时才会让元素发生位置偏移，但不管两种设置都会影响后面的元素。
position:relative会让元素发生位置偏移，但是因为本身并没有脱离文档流，所以不会对后面的元素有影响。

margin和relative.png

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

利用position:absolute，要设定居中的容器设置为绝对定位，然后调整top和left为50%，再设置margin为本身宽高的负一半。

满屏父元素的居中.png
固定高度父元素的居中.png

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

浮动框不在普通文档流中，所以文档中的块框就表现得像浮动框不存在一样。浮动框可以左右移动，直到碰到边缘或者下一个浮动框。
1.框一像右浮动碰到边缘：

右浮动.png

2.框一左浮动，框一因为脱离文档流，所以框二向上移动，框一盖住框二：

左浮动.png

3.依次浮动：

依次浮动.png

4.在没有足够的水平空间时，元素会像下移动至空间足够：

没有足够水平空间.png 高度不同时被卡住.png

浮动会让文字环绕浮动元素布局：

文字环绕.png

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

浮动带来各种遍历，而其脱离文档流的特性也会带来各种问题，例如元素环绕等，清除浮动就是来解决这些问题，清除浮动是针对元素本身，只对自己有效，不能影响别的元素。
浮动引起的问题：

float引起的问题.png
清楚浮动之后：
clear清除浮动.png
清楚浮动的值：
clear:none：默认值，允许两边都有浮动
clear:left：不允许左边有浮动
clear:right：不允许右边有浮动
clear:both：两边都不允许有浮动

浮动和定位参考

代码

一.写出如下两栏布局, 其中中间区块宽度900px, 居中,左侧边栏宽度200px, 右侧边栏宽度700px
ps: 图片左浮动，导航栏整体右浮动，导航栏里面的li元素左浮动。
ps: aside左浮动，main左浮动
凡是有浮动的地方，其直接父元素必须清除浮动

0_1462790808720_upload-f2f4502f-a0e1-4328-8077-4701058384ca
github
在线预览
二.不适用背景图片实现如下效果 0_1462963669833_upload-4feae399-e99f-4209-add5-1fcc2c98deea
github
在线预览

本文版权归本人和饥人谷所有，转载请注明来源。