[CSS 레이아웃] float와 clear

float 프로퍼티는 특정 요소의 배치 및 페이지 레이아웃을 설정하는데 사용됩니다. 

 

프로퍼티의 값은 다음과 같습니다.

 

- left: 요소가 소속된 컨테이너의 왼쪽에 자신을 위치시킵니다.

- right: 요소가 소속된 컨테이너의 오른쪽에 자신을 위치시킵니다.

- none: 요소는 부유하지 않습니다. 기본 값입니다.

 

float를 이용하면 아래와 같이 손쉽게 이미지 주위를 텍스트로 감싸도록 만들 수 있습니다. 

 

See the Pen float by hogni-seoul (@hogni-seoul) on CodePen.

 

그런데 뭔가 이상합니다. 사진이 부모 요소의 영역을 넘어갔습니다.

 

사실 이렇게 float 프로퍼티를 사용할 때 한가지 알아두어야 할 것이 있습니다. float 프로퍼티를 가진 요소는 부모가 높이를 인지 할 수 없다는 것입니다. 때문에 아래 사진과 같은 현상이 나타날 수 있습니다. 이런 현상을 방지하기 위해서 clear 프로퍼티를 이용한 clearfix라는 방법을 사용합니다.

 

 

clearfix

부모 요소가 float 프로퍼티를 가진 자식요소의 높이를 제대로 인지할 수 있도록 고쳐주는 것을 clearfix라고 합니다. 다음과 같이 해결할 수 있습니다.

 

부모요소::after {
  content: "";
  display: block;
  clear: both;
}

 

See the Pen rNOgGoZ by hogni-seoul (@hogni-seoul) on CodePen.