CSS之两栏布局

<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之后，虽然脱离了原来位置，但是出生位置第二行，它不会补到第一行去。必须第一个让出位置，才会补上去。