float 정렬

float: left; // 요소를 왼쪽에 표시
float: right; // 오른쪽에 표시
float: none; // 기본 값
float: inherit; // 상위 요소에서 상속

 

• float: left;

See the Pen float: left; by nilgi (@nilgi) on CodePen.

 

• float: right;

See the Pen float: right by nilgi (@nilgi) on CodePen.

 

• float을 이용한 div 정렬

See the Pen float div 정렬 by nilgi (@nilgi) on CodePen.

원래 div는 block 구조로 새 줄에 표시한다. float을 이용해 inline 구조로 표시할 수 있다.