Document flow and positioning, floating

There are three positioning mechanisms in CSS:

1. normal document flow
2. float
3. postion

The positioning mechanisms out of the document flow are:

1. float
2. position：absolute
3. position：fix

1. Concept:

Document flow (normal flow), also translated as normal flow, normal flow, refers to the layout from left to right, from top to bottom, in line with the meaning of the label itself in HTML. It is relative to the box model.
Text flow refers to the display of html text, as opposed to text paragraphs.

2. What is out of document flow?

Originally, this label belongs to document flow management, so it should follow the normal layout of document flow from left to right, top to bottom, and conform to the meaning of the label itself.
Out of document flow is the label that is out of document flow management. It is not constrained by the layout of the document flow, and the space occupied by this tag in the original document flow is also cleared.

3. Detailed explanation of the positioning mechanism out of the document flow

1. float: out of the document flow, but not out of the text flow.

元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，
直接在它占据的区域布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有脱离文本流。

1. position: absolute is out of document flow and text flow

绝对定位后，不仅元素盒子会脱离文档流，文字也会脱离文本流。那么后面
元素的文本就不会在认同它的区域位置，会直接在它后面布局，不会在环绕。

当然你可以使用 index-z 来让底部的元素到上面来，类似于一个图层的概念

1. position: fixed is out of document flow and text flow

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。

Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。

注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持.