HTML普通流/文档流&浮动

源文档点这里

定位和文档流的关系。

普通流(normal flow)：将窗体自上而下分成一行一行，并在每行中按从左至右的挨次排放元素，即为普通流/文档流。

内联元素不会独占一行，而每个非浮动的块级元素都独有一行。

浮动元素则按规则浮在行的一端，若当时行容不下。则另起新行再浮动。浮动元素不占任何正常文档流空间，而浮动元素的定位照样基于正常的文档流，当一个元素脱离正常文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

浮动元素的定位照样基于正常的文档流：普通流取位置是不考虑在它之前的浮动元素，但浮动元素取位置时是会考虑在它之前的普通流块元素的。    例如： 图片文字环绕的效果，如果段落框在图片之后，则会预留图片的位置，段落框的宽度会变短。如果不想变短，则可以使用clear属性对段落框进行设置。具体见MDN: clear属性

position属性值：

　　　　　　　　absolute：绝对定位。完全离开文档流，使用left，right，top，bottom等属性相对于其最接近的一个具有定位设置（即position值不为默认值static）的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。

　　　　　　　　relative：相对定位，原本所占的空间仍保留。对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置。当对象定位在浏览器窗口以外，浏览器因此显示滚动条。

　　　　　　　　fixed：固定定位。完全离开文档流，对象定位遵从绝对(absolute)方式，但是要遵守一些规范。当对象定位在浏览器窗口以外，浏览器不会因此显示滚动条，而当滚动条滚动时，对象始终固定在原来位置，即相关于视区进行偏移。

　　　　　　　　static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

　　　　　　　　inherit：继承值，对象将继承其父对象相应的值。