float:left와 float:right 그리고 position:relative와 position:absolute을 통한 상하좌우 정렬
1. float
float:left = 자식요소의 좌표값를 부모 요소의 x=0, y=0
float:right = 자식요소의 좌표값을 부모 요소의 x=(부모요소의 넓이-자식요소의 넓이), y=0
2. position
position:relative = 상위요소로 부터 자신의 상대위치를 지정
position:absolute = 부모요소로 부터 자신의 절대위치를 지정
position:fixed = 브라우저로 부터 자신의 절대위치를 지정(ie6 제외)
<div style="width:200px;height:200px;background:lightblue;">0</div>
<div style="width:200px;height:200px;border:1px solid #999999;position:relative;top:30px;left:30px;">
<div style="float:left;width:30px;height:30px;background:lightgreen;">1</div>
<div style="float:right;width:30px;height:30px;background:lightgreen;">2</div>
<div style="clear:both;position:absolute;bottom:0px;left:0px;width:30px;height:30px;background:lightgreen;">3</div>
<div style="clear:both;position:absolute;bottom:0px;right:0px;width:30px;height:30px;background:lightgreen;">4</div>
<div style="position:absolute;top:50%;left:50%;width:30px;height:30px;margin-top:-15px;margin-left:-15px;background:gold;">5</div>
</div>
<div style="position:fixed;width:100px;height:100px;top:100px;right:0px;background:pink;">6</div>