float

float 프로퍼티는 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다.

felxbox 레이아웃을 사용한다면 더욱 간단하게 정렬을 구현할 수도 있지만 flexbox 레이아웃을 지원하지 않는 IE를 고려해야 한다면 float 프로퍼티를 사용해야 한다.

float 프로퍼티는 본래 이미지와 텍스트가 있을 때, 이미지 주위를 텍스트로 감싸기 위해 만들어진 것이다.

float 프로퍼티는 해당 요소를 다음 요소 위에 떠있게 한다. 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것이다. float 프로퍼티를 사용할 때 요소의 위치를 고정시키는 position 프로퍼티의 absolute를 사용하면 안된다.

기본값은 float: none;로 요소를 떠 있게 하지 않는다. (block 요소 기본 속성을 그대로 유지한다.)

정렬

float 프로퍼티를 사용하지 않은 블록 요소는 수직으로 정렬된다.

'float:left; 프로퍼티를 사용하면 왼쪽부터 가로 정렬되고, float:right; 프로퍼티를 사용하면 오른쪽부터 가로 정렬된다.

오른쪽 가로 정렬의 경우, 먼저 기술된 요소가 가장 오른쪽에 출력되므로 출력 순서가 역순이 된다.

float 프로퍼티는 좌측, 우측 가로 정렬만 할 수 있다. 중앙 가로 정렬은 margin 프로퍼티를 사용해야 한다. (margin: 0 auto;)

float 해제하기

float은 본래 이미지와 텍스트를 자연스러운 흐름으로 배치하기 위해 고안된 속성이나, 실무에서는 주로 어떠한 요소들을 옆으로 배치할 때 사용한다.

하지만 float 을 사용하면 브라우저가 높이를 인지하지 못하게 되기 때문에 clear 하는 과정이 필요하다.

float 프로퍼티를 해제하는 방법에는 여러 가지가 있지만 float된 요소의 부모태그에 가상요소를 만들고 해당 요소에 clear:both를 지정하는 방법이 가장 많이 쓰이고 권장된다.

float된 요소의 부모태그:after {
  content: "";
  display: block;
  clear: both;
}