css float 사용방법 정리

1.float 개요

float 속성은 요소를 좌우 방향으로 띄워서 배치하는 데 사용됩니다.

일반적으로 이미지나 텍스트를 주변에 감싸는 레이아웃을 구현하는 데 많이 사용됩니다.

float 속성은 다음과 같은 값을 가질 수 있습니다.

기본식

float : left;

속성값	속성설명
left	요소를 왼쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록함
right	요소를 오른쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록함
none	float을 취소할때 사용합니다.

float 방식에 대한 설명

2.float 사용 예제

2-1 float : left 예문

See the Pen flaot 예제 by ture403 (@ture403) on CodePen.

 

 

2-2 float : right 예문

See the Pen Untitled by ture403 (@ture403) on CodePen.

 

3. clear

만약 float로 레이아웃을 설정하고 난 뒤에 콘텐츠가 계속 또 있으면 안보이게 됩니다. 

float 속성을 적용하면 그 이후에 오는 다른 요소들까지 똑같은 속성이 전달되어 둘러싼 형태가 되거나 부유된 영역 아래(under)로 들어가게 됩니다. 

clear 속성은 float된 박스들의 바로 다음 박스에게 주변을 흐르지 않고 원래대로 아래에 배치되도록 합니다. 즉, float을 해제시켜주는 중요한 역할을 한는데, 이 요소는 블록이여야 합니다.

기본식

clear: both;

속성 값	속성 설명
left	float된 박스 중 좌측이 짧을 때 좌측의 빈 공간부터 채워 내려옴
right	float된 박스 중 우측이 짧을 때 좌측의 빈 공간부터 채워 내려옴
both	float된 박스 중 어느 쪽도 채우지 않고 다시 한단으로 배치

 

See the Pen clear both before by ture403 (@ture403) on CodePen.

clear : both 실행 전 사진

 

See the Pen Untitled by ture403 (@ture403) on CodePen.

clear : both 실행 후 사진

 

3. 그 외 float 해제하는 몇가지 방법

방법	속성 설명
1	1. float된 요소를 감싸는 박스가 이미 float 되어 있는 경우 2. 우연히 일어난 경우가 드물며, 어차피 감싸는 박스의 float을 해제해야 함
2	1. float된 요소를 감싸는 박스에 overflow : auto; 한다. 2. 세로 스크롤바가 생길 경우 사용할 수 없으며 width값 주어야 크로스 브라우징 됨
3	1. float 된 박스들을 감싸는 박스에 height값을 준다 2. 본문 내용엔 높이를 주지 않으므로 세로 사이즈가 불변일 경우 아니면 사용불능