CSS浮动与定位

文档流的概念，如何让元素脱离文档流

• 文档流指的是浏览器按照html的内容按顺序解析并呈现，遇到行内元素就往行内放，遇到块级元素就空一行放置，依次排列；
• 定位中的fixed、定位中的absolute、浮动都可以让元素脱离文档流。

定位方式简介

• 有static、fixed、absolute、relative这四种定位方式；
• static是静止，不进行定位，元素还是处于正常的文档流中，忽略上下左右的偏移和z-index声明，是默认值。
• fixed是把元素固定住，是相对于浏览器来定位的，会脱离文档流，可以使用left、right、top、bottom来改变固定的位置；一般用于广告、一些固定提示栏等你想要固定持续显示的内容。
• absolute是相对于上一个使用定位（static除外）的祖先元素进行定位的，如果没有使用定位的祖先元素，就相对于html文档页面进行定位，会脱离文档流，同样使用left、right、top、bottom来设定偏移的位置；一般用于使用相对位置的场景，在父元素上加个relative，在给子元素设定absolute进行相对偏移。
• relative是相对于元素自身在文档流中的位置进行偏移的，注意它并不会脱离文档流，使用left、right、top、bottom来设定相对偏移的位置，一般用于微调整元素自身位置。

absolute, relative, fixed 偏移的参考点

• absolute, relative, fixed偏移的参考点分别是上一个使用除static以外定位的祖先元素（若没有找到，则相对于html元素即文档）、元素自身原本在文档流中的位置、浏览器窗口。

z-index 的使用

• 可以设定元素的堆叠顺序（可以理解为Z轴高度，越高离我们视野就越近，高度比它小的就被盖住了），值越大，堆叠优先级越高；使用时将你所要展示出来的元素的z-index值设得比其他遮挡它的元素的值大就可以。

position:relative和负margin使元素位置发生偏移的区别

• position:relative是单单把作用到的元素进行一个位置偏移，而其他的元素不会因此发生位置的改变；而负margin是调整外边距，这样会影响到它周围元素布局和位置。

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

• 用position: absolute设置这个元素相对于页面的top和left为50%，此时该元素的左上角这个点就垂直水平居中了，之后再用-margin让其往左、往上分别移动其宽高的一半，达到垂直水平居中的目的。

浮动元素的特征及对其他元素的影响

• 浮动元素会脱离文档流，不占据空间；
• 其他浮动元素跟它处于同一层，会紧挨着它的边框放置，如果有其他元素有清除浮动，则会另起一行放置；
• 普通元素因它脱离文档流，所以会认为它不存在，会顶上它的位置，所以普通元素的一部分会被挡住；
• 文字遇到浮动元素边框会避开另起一行有环绕效果。

清除浮动

• 清除浮动指的是用clear属性来设置是否允许它自身周围存在浮动元素，这样可以让浮动元素因被排斥或排斥其他浮动元素而再往下占据一行，从而消除对其他元素的影响；可以设置clear：left、right、both来选择不允许哪一边存在浮动元素。