<div class="right"></div>
<div class="left"></div>
*{
padding: 0;
margin: 0;
}
.right{
position: absolute; /*成了行级块元素，脱了文档流，那么它后面的兄弟会补位上去*/
right: 0;
width: 100px;
height: 100px;
background: bisque;
opacity: 0.3;
}
.left{
margin-right: 100px; /*把右边的位置让给box*/
height: 100px;
background: green;
}
按照上面的样式写，如果页面是像下面的页面写，会出现bug
以下不会在一行上：
米色先出生，绿色后出生。米色区域调完了position之后，虽然脱离了原来位置，但是出生位置第二行，它不会补到第一行去。必须第一个让出位置，才会补上去。
CSS之两栏布局
原文地址：https://www.cnblogs.com/combating/p/10804197.html