[css] float 사용방법

html은 위에서 아래로 출력되지만 

 

옆으로 붙여서 정렬할때 float를 사용합니다.

 

구조

div{float:left;}
div{float:right;}
div{float:none;}

left : 왼쪽으로 붙음,

right : 오른쪽 으로 붙음

none : float을 none함 (float된 것을 없앰)

 

html 부분

<div class="box1">1번 박스</div>
<div class="box2">2번 박스</div>
<div class="box3">3번 박스</div>

 

css부분

.box1{float:left;width:200px; height:200px;text-align:center; line-height:200px;background:red; color:#fff;border:1px solid #000;}
.box2{float:left;width:200px; height:200px;text-align:center; line-height:200px;background:blue; color:#fff;border:1px solid #000;}
.box3{float:left;width:200px; height:200px;text-align:center; line-height:200px;background:green; color:#fff;border:1px solid #000;}

 

 

결과

박스가 밑으로 떨어지지않고 옆으로 붙음을 확인 할 수 있습니다.