css中的文档流/浮动/定位

1.标准流

在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版
（1）垂直排版, 如果元素是块级元素, 那么就会垂直排版
（2）水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版

2.浮动流

浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐
浮动元素碰到包含它的边框或者浮动元素的边框停留。
注意：如果浮动元素的父元素设置了padding值，那么浮动元素不会占用父元素的padding区域

float属于半脱离文档流，float和position:absolute/fixed一样会脱离文档流，但浮动脱离文档流仍然占据位置，其后的文本内容会按照顺序排列。

3.定位

• postision：static;始终处于文档流给予的位置。看起来好像没有用，但它可以快速取消定位，让 top，right，bottom，left 的值失效。在切换的时候可以尝试这个方法。
• postision:relative;相对于自身位置定位，仍处于文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置，如果最外层设置relative，在没有设置宽度情况，元素宽度是整个浏览器的宽度
• postision:absolute;相对于离自己最近的设置了相对或绝对定位的父元素定位，如果没有父元素设置相对和绝对定位，则相对于跟元素html定位，设置了绝对定位的元素脱离了文档流，如果没有设置宽高由元素内容决定，脱离后元素位置是空的下面的元素会占据.
• postision:fixed：相对于浏览器窗口定位,如果没有设置宽高由元素内容决定。