[TIL] 레이아웃 float 속성

CSS를 잉요한 레이아웃 속성에는 float, clear, display, position, column, box 등이 있지만 이중에 많이 사용되는 속성으로 기술하면 float > display > position 순이다.

float 속성

float는 뜨다. 라는 의미로 float를 이용한 레이아웃 방식을 부유 레이아웃이라고 한다.

float 속성 부모 요소를 기준으로 왼쪽이나 오른쪽으로 레이아웃을 흐르게 한다.

      ex) float: left;    //왼쪽으로 흐르게 함
      ex) float: right;   //오른쪽으로 흐르게 함

- float는 이미지와 글 문단이 있을 경우 이미지 옆에 글 문단이 흐르게 할 때 지정한다.
- div 요소를 이용하여 다단의 레이아웃이나 홈페이지 레이아웃을 구성한다.
- float 속성값을 지정하 요소는 width 값을 별도로 지정하지 않으면 (기본값이 100%)입력되어 있는 내용의 크기에 따라 자동으로 가로 크기가 지정된다.
- float 속성 값을 2 개의 형제 블록 요소에 각각 left와 right로 값을 지정하면 부모 요소의 가로 크기를 기준으로 1개는 왼쪽 끝으로, 나머지 한개는 오른쪽 끝으로 배치된다.

clear 속성

clear 속성 float 속성으로 레이아웃을 흐르게 지정한 방식을 해제한다.

      ex) clear: left;
      ex) clear: right;
      ex) clear: both

float속성이 left로 지정될 뗴 clear 속성도 left로 지정
float속성이 right로 지정될 뗴 clear 속성도 right로 지정
float속성이 both로 지정될 뗴 clear 속성도 both로 지정

- 줄이 바뀌는 요소에서 float 방향과 같은 방향으로 clear 속성을 지정한다.
- 줄이 바뀌어야 하는 요소들 사이에서 div 요소를 삽입해 clear 속성을 지정한다.