知识前要：
1文档流，是盒模型中的概念。
文档流就是在浏览器中的规则，块状元素的规则是从上到下排序的，行内元素是从左到右排序的
文档流我个人觉得就是盒模型之间的空间或者说是空气
2文本流，是文本中的概念，只适用于文本
这两个不会互相影响
3脱离文档流，有float，absolute和fixed(relative并不会脱离文档流)
其中float和position(absolute和fixed)是有区别的
float是脱离文档流，但是没有脱离文本流。？？？这句话是啥意思？
也就是说，box会对你视而不见，会占据你所在的空间，放在你的下方（z轴）。那文字是可以看到你的。
给demo1设置了浮动float之后
可以看到demo2的box和demo1的box重叠了，并且放在demo1的下面。这就是脱离了文档流。但是文字可以看见已经浮动的demo1的。所以，float是脱离了文档流但是没有脱离文本流的。我们的float是可以通过浮动来清楚浮动属性的。但是只能影响到自己。float可以做到文字围绕的效果
我们的position中的属性，absolute和fixed是会都脱离的。
所以，我们在水平居中对齐的时候，可以先使用absolute让box脱离文档流（相对于第一个不为static的元素）。然后再使用left,top,bottom,right都为0和margin：auto。这样就可以实现水平居中对齐
咱们对margin再进行一些拓展
margin向间隔的是box,对于两个box之间设置距离，但是他没办法对于文档流（或者说空间来设置间隔距离）
1margin合并
例如：
会取其中最大的值
**
2子元素设置margin-top，出现塌陷现象
**
效果并不是我们想要的，margin于父的box,从而达到居中的效果。这就是margin中的塌陷现象
解决方法就是，在父div上设置一个border.因为子元素box属性margin只能相对于box（但是他现在踹的是流，空气），现在使用borber对父元素进行封口。就可以达到我们想要的效果了。所以我们水平垂直居中必须要先进行position脱离文档流