文档流的概念指什么？有哪种方式可以让元素脱离文档流?
即普通流。文档流是文档中可显示对象在排列时所占用的位置，将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。内联元素和块级元素各自遵循着不同的显示方式，构成了html的文档，文档的内容被比喻为流，文档中的元素可以随波流,也可以脱离流，漂浮在其上，如果你没有为元素设定附加css属性，那么元素将按照它在html代码中出现的顺序一个挨着一地排列。
浮动和定位可以让元素脱离文档流。
- 浮动 float
- 固定定位 position:fixed
绝对定位 position:relative
有几种定位方式，分别是如何实现定位的，使用场景如何？
1. static(默认)
当你没有为一个元素(例如div)指定定位方式时，默认为static，也就是按照文档的流式(flow)定位，将元素放到一个合适的地方。所以在不同的分辨率下，采用流式定位能很好的自适合，取得相对较好的布局效果。
一般来说，我们不需要指明当前元素的定位方式是static——因为这是默认的定位方式。除非你想覆盖从父元素继承来的定位系统。
left,top属性对static没有效果，static是靠margin这些定位的。
2. relative(相对定位)
在static的基础上，如果我想让一个元素在他本来的位置做一些调整(位移)，我们可以将该元素定位设置为relative，同时指定相对位移(利用top,bottom,left,right)。
有一点需要注意的是，相对定位的元素仍然在文档流中，仍然占据着他本来占据的位置空间——虽然他现在已经不在本来的位置了。
3. absolute(绝对定位)
如果你想在一个文档(Document)中将一个元素放至指定位置，你可以使用absolute来定位，将该元素的position设置为absolute，同时使用top,bottom,left,right来定位。
如果没有定位父元素，位置是相对于body来进行的。
绝对定位会使元素从文档流中被删除，结果就是该元素原本占据的空间被其它元素所填充。
4. fixed(固定定位)
我们知道absolute定位的参照物是“上一个定位过的父元素(static不算)”，那么如果我想让一个元素定位的参照物总是整个文档(viewport)，怎么办呢？
答案是使用fixed定位，fixed定位的参照物总是当前的文档。利用fixed定位，我们很容易让一个div定位在浏览器文档的左上，右上等方位。
HTML中的几种定位方式
absolute, relative, fixed 偏移的参考点分别是什么？
- absolute：参考static 定位以外的第一个父元素进行定位，会一层层往上找，没有的话将参考body进行定位。
- relative：参考其正常（原先本身）位置进行定位。
- fixed：参考浏览器窗口进行定位。
Position属性四个值：static、fixed、absolute和relative的区别和用法
z-index 有什么作用? 如何使用?
当网页上出现多个由绝对定位（POSITION:absolute）或固定定位（POSITION:fixed）所产生的浮动层时，必然就会产生一个问题，就是当这些层的位置产生重合时，谁在谁的上面呢？或者说谁看得见、谁看不见呢？这时候就可以通过设置z-index的值来解决，这个值较大的就在上面，较小的在下面。
z-index的使用
demo
position:relative和负margin都可以使元素位置发生偏移?二者有什么区别?
使用position:relative设置偏移时，相对定位的元素仍然在文档流中，仍然占据着他本来占据的位置空间，不影响其他元素的布局。
使用负margin设置偏移时，元素会放弃自己原本占据的空间，不但改变了自己的位置，还会影响其他元素的位置。
demo
如何让一个固定宽高的元素在页面上垂直水平居中?
使用绝对定位position:absolute使目标元素脱离文档流，top和left设置偏移50%，这时候目标元素的左上角正好处于页面正中间，再使用margin负值来设置目标元素向左上方向偏移自身宽高的一半，这时目标元素会垂直水平居中显示在页面。
demo
浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
浮动元素有什么特征？
- 浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示
- 浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐
- 浮动元素后面的内联元素会向此浮动元素的外边距靠齐
- 元素设置为浮动之后，就生成一个块级框（css行高提出的概念），没必要再声明display:block，可以设置宽高
对其他浮动元素、普通元素、文字分别有什么影响?
- 其他浮动元素：浮动元素会依次排在其之前浮动元素左边或右边，父元素如果放不下了会被挤到下面一行。
- 普通元素：普通元素将会占据其原来的位置，后面的浮动元素会浮在普通元素之上。
- 文字：文字会环绕浮动元素显示。
demo
清除浮动指什么? 如何清除浮动?
在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
如何清除浮动？
- 方法一：使用带clear属性的空元素
在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。 - 方法二：使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。
在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。 - 方法三：使用CSS的:after伪元素
结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
demo
本教程版权归作者和饥人谷所有，转载须说明来源！
网友评论