요소 정렬 스타일 - float

1. float

-  float: left 

요소를 띄워서 왼쪽으로 정렬함

-  float: right 

요소를 띄워서 오른쪽으로 정렬함

 

요소를 정렬할 때 사용하는 스타일 중 float 속성이 있습니다.

 

float 속성은 요소를 띄워서 지정한 방향으로 정렬해줍니다.

 

이 때 요소의 형식이 inline-block 형식으로 바뀌게 됩니다.

 

요소를 띄운다는 것은 해당 요소를 기본 레이아웃의 흐름에서 벗어나게 만든다는 의미입니다.

 

 

 

2. clear

-  clear: left 

float: left를 해제함

-  clear: right 

float: right를 해제함

 

float 속성을 사용하다 보면 요소가 겹치는 문제가 생길 수 있는데, clear 속성을 사용해 float 속성을 해제함으로써 문제를 해결할 수 있습니다.


3. 활용

float 속성을 사용하면 요소를 다양한 방식으로 배치할 수 있습니다.

아래는 가장 기본적인 활용인 사각형의 2분할 및 4분할 배치 예시입니다.

 

* 2분할

 

See the Pen Untitled by cmp (@cmpset) on CodePen.

위 예시의 내부 요소는 모두 <div>태그로 만들어졌기 때문에 block 속성을 띄며 한 행을 전부 차지합니다.

 

그러나 float 속성을 부여하면 inline-block 속성으로 바뀌기 때문에 한 행을 전부 차지하지 않게 되어, 사각형을 2분할한 것처럼 보이게 됩니다.

 

 

 

* 4분할

See the Pen quarter by cmp (@cmpset) on CodePen.

사각형을 두 행으로 나눈 후, 각 행의 요소에 float 속성을 주어서 분할했습니다.