什么是文档流，为什么定位和浮动会脱离文档流？

Question

什么是文档流，为什么定位和浮动会脱离文档流？

Answer 1

可以看看我这篇文章：详解css相对定位和绝对定位http://segmentfault.com/blog/trigkit4/1190000000680773

文档流是文档中可显示对象在排列时所占用的位置。比如网页的div标签它默认占用的宽度位置是一整行，p标签默认占用宽度也是一整行，因为div标签和p标签是块状对象。 网页中大部分对象默认是占用文档流，也有一些对象是不占文档流的，比如表单中隐藏域。

Answer 2

没有文档流 这个翻译大有问题 明明是normal flow 非得翻译成文档流
叫普通/正常/标准都行呀
所谓普通/标准流，就是块级元素一个一排地从上向下堆放，行内元素从左往右地堆放，这就是一个标准的流程，脱离了就是不按规矩来了，改往后排居然字体身份，打破次元，从二维表面升起来了，跑到原来位置的上空了。

---

float脱离普通流是为了图文环绕效果（float本来就是干这个的），元素浮动了，脱离了，父元素就塌陷了（你非要给父元素设置高度说不塌陷 那也没办法…………），文字就跟着往上走了，跑到图片边上了。
但是！文字内容、inline、inline-block和各种table元素是不会走到浮动元素下面去的(就算你给它设置个block属性）
block、run-in、list-item元素才会往浮动元素下面跑（如果你给它们变成display:inline-block，它们也会像文字一样跑到浮动元素旁边而不是下面去。
但是个人认为没有什么不脱离流的说法，不脱离父元素会塌陷？脱离是脱离了，但是某些元素和文本是没法去占据浮动元素下面的位置，所以才能图文环绕嘛 不然文字或者你弄的a标签啥的跑图片下面去了还搞毛啊

---

定位就不说了，不脱离的话按照流从左向右从上向下排着走，还搞毛的布局了（当然float也被用来布局，虽然它本来是被用来作图文环绕而发明的）

Answer 3

具体可以参考css权威指南。

我理解的文档流是：元素在没有浮动和绝对定位时的正常布局方式，（从左到右，从上到下）。

为什么定位和浮动会脱离文档流，这个目的是为了更多的排版模式而添加的吧。