(css) float

왼쪽이나 오른쪽으로 배치하기

웹 요소를 문서 위에 떠 있게 만듬.

-> 왼쪽 구석이나 오른쪽 구석에 요소가 배치

float: left | right | none

속성 값	설명
left	해당 요소를 문서의 왼쪽으로 배치
right	해당 요소를 문서의 오른쪽으로 배치
none	좌우 어느쪽으로 배치하지 않음

<style>
   .box1{
      padding:20px;
      margin-right:10px;
      background:#ffd800;
      float:left;
   }
   .box2 {
      background: #0094ff;
      padding:20px;
      margin-right:10px;
      float:left;
   }
   .box3 {
      background: #00ff21;
      padding:20px;
      float:left;
   }
   .box4 {
      background:#ffffff;
      padding:20px;
      float:right;
      border:1px solid black;
   }
</style>
<div class="box1">박스1</div>
<div class="box2">박스2</div>
<div class="box3">박스3</div>
<div class="box4">박스4</div>

출처 : Doit! html5 + css3 웹표준의 정석