CSS定位及文档流

2019独角兽企业重金招聘Python工程师标准>>>

今天看到一个面试题问哪种css的属性不会让div脱离文档流，答案有position分别是relative，abosolute，fixed及float的选项

当时看到题不是太明白什么是文档流，查了下normal flow，其实就是html中从上到下，从左到右的显示顺序

在这个过程中, 行内元素水平排列, 直到当行被占满然后换行; 块级元素则会被渲染为完整的一个新行（比如DIV就是一个块级元素）

接下来再看看CSS中的浮动机制float，float会让当前元素漂移到左右，其它的布局会感知不到这个元素了，所以是脱离了正常的文档流的。

接下来看看css中3种定位机制，abosolute是相对于第一个父元素进行定位（注意是有非static的position的，比如relative或者absolute的），fixed是相对于浏览器窗口进行定位，这2个都会脱离文档流。而relative是相对于该元素正常位置进行定位，其周边的元素不会变，所以使用了relative定位的元素是不脱离文档流的。

参考文档：

http://www.cnblogs.com/tim-li/archive/2012/07/09/2582618.html

https://tink.gitbooks.io/fe-collections/content/ch03-css/normal-flow.html

转载于:https://my.oschina.net/zimingforever/blog/730840