关于浮动、定位和脱离文档流问题

Question

编码如下图，小白给标签left和right设置了float属性，给main设置了position：absolute属性。按理说这三个标签都脱离了文档流，那为什么给main设置margin：0  10px后显示结果和没脱离文档流一样，谁能解释一

浏览器显示结果如下图

Answer 1

你虽然给main设置了position：absolute属性，但是absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。，所以他并没有脱离父元素wrap

Answer 2

.main{ position:absolute; left:200px; right:300px;} 你这left  right是什么鬼，先left，后right，取的是right：300；没有top，没有bottom，默认main在wrap的最上方top=0的位置