浮动、定位

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

网页按照HTML排序自上而下，自左到右的排列，块级元素横占一行，行级元素由左到右顺序排列就是文档流。
浮动、绝对定位和fixed可以脱离文档流。脱离文档流就是不会按照既定的顺序排列，会任由自己运动，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围，而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

浮动

position:absolute

position:fixed

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

position:static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
position:relative：生成相对定位的元素，相对于自己正常位置进行定位。用于元素位置不合适需要微调的时候。

position:relative

position:absolute：绝对定位，相对于position:relative的父或祖先元素，如果没有会以body来定位元素。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。普通流中其它元素的布局就像绝对定位的元素不存在一样。

position:absolute相对于其他元素的绝对定位

position:absolute相对于body的绝对定位

position:fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

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

absolute：以定位为relative的父或祖先元素为参考点，如果没有会以body作为参考点偏移。
relative：以自身正常位置为参考点偏移。
fixed：以浏览器窗口为参考点偏移。
参看上题图片。

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

因relative而重叠的元素，可以用z-index来决定优先级，数值大的在前面，覆盖后面的元素。上图为未设置z-index，下图为设置了z-index。

z-index

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

position:relative使元素发生偏移，虽然能够覆盖其他元素，但是只是位置发生了偏移，对于文档流没有影响，其他元素还会以为它还在那个位置。
负margin使元素位置发生偏移，也能够覆盖其他元素，但是其后的元素也会跟着它移动，会影响文档流。

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

把父元素设置成相对定位relative，子元素设置成绝对定位absolute，上偏移50%，左偏移50%，由于是点到点的偏移，所以元素会错过居中的位置，需要用上边距和左边距的负边距来回到剧中的位置，负边距的数值为被偏移元素宽高的一半。

垂直水平居中

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

浮动元素会脱离文档流，会在其他浮动后面继续浮动，由于有渲染的先后，所以有时浮动的顺序有所变化。
对于普通元素，浮动元素不会占据文档流的位置，所以普通元素会认为它不存在而继续文档流，但是块元素会在浮动元素的下面,行内元素和块元素中的行内内容会考虑浮动元素的边界,因此会围绕着浮动元素。
对于文字，文字会围绕浮动元素。

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

清除浮动是因为浮动会对正常文档流产生影响，比如文字会围绕浮动元素，为了消除这种影响，所以要清除浮动。
清除浮动方式：
clear:none：允许两边有浮动，默认值。
clear:left：不允许左面有浮动。
clear:right：不允许右面有浮动。
clear:both：两边都不允许有浮动，由于太过暴力，所以用的比较少。

****本文章版权属 饥人谷_张世钧和饥人谷 所有，如需转载请务必注明出处。****