float
block 요소는 원래 세로로만 나열되지만 float을 이용하여 가로로 배치할 수 있습니다.
float은 레이아웃을 완성하기 위한 필수적인 속성입니다. float을 지정하는 방법과 함께 float을 해제하는 방법도 알아두어야 나머지 레이아웃을 완료할 수 있습니다.
float은 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변에 흐르게 하는 속성인데, 세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 매우 유용합니다. float한 박스에 가로 사이즈를 지정해 주어야 크로스브라우징 됩니다. 그러나 heading 요소나 인라인 요소들은 가로 사이즈 없이 float해도 레이아웃이 흐트러지지 않습니다.
| 속성 값 | 속성 설명 |
| left | 요소를 왼쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 합니다. |
| right | 요소를 오른쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 합니다. |
옆으로만 배치한 콘텐츠 내용이 많으면 아래로 흐릅니다. float:left;을 사용하게 되면 아래로 나열되어야 할 콘텐츠를 우측 옆에서 흐르도록 배치해줍니다.
float을 취소할 때에는 float:none; 합니다.
float:right;는 어떤 차이가 있을까요? 좌측이 아닌 우측에 붙는다는 것 외에 큰 차이가 없습니다.
아래로 나열되어야 할 콘텐츠를 좌측 옆에서 흐르도록 배치해 줍니다.
clear
clear 속성은 float된 박스들의 바로 다음 박스에게 주변에 흐르지 않고 원래대로 아래에 배치되도록 합니다.
즉, float을 해제시켜주는 중요한 역할을 하는데, 이 요소는 블록이어야 합니다.
| 속성 값 | 속성 설명 |
| left | float된 박스 중 좌측이 짧을 때 좌측의 빈 공간부터 채워 내려옵니다. |
| right | float된 박스 중 우측이 짧을 때 좌측의 빈 공간부터 채워 내려옵니다. |
| both | float된 박스 중 어느 쪽도 채우지 않고 다시 한단으로 배치합니다. |
clear : both ; 를 사용하게 되면 옆으로 딸려 올라갈 뻔한 박스를 아래로 배치해 줍니다.
float한 박스 뒤에 콘텐츠가 없어서 clear:both;할 선택자가 없다면 박스 안에 가짜로 요소를 만들어 내용은 없지만 블록 속성을 부여하여 clear:both; 해줍니다.
이것이 float를 해제하는 가장 일반적인 방법입니다.
보통은 저런 속성을 미리 하나의 클래스로 등록하여 float을 해제해야 하는 요소마다 그 클래스를 붙여줍니다.
float을 해제하지 않으면 다음 박스들에 레이아웃이 틀어지며, 또한 float된 박스를 감싸는 박스에 부여된 배경, 테두리 여백 등이 제대로 나타나지 않는 경우도 있습니다. 따라서 레이아웃을 제대로 표현하는데 float 해제는 반드시 필요합니다.
float 해제 방법
- float된 요소를 감싸는 박스가 이미 float 되어 있는 경우
우연히 일어난 경우가 드물며, 어차피 감싸는 float을 해제해야 합니다. - float된 요소를 감싸는 박스에 overflow:auto;합니다.
세로 스크롤바가 생길 경우 사용할 수 없으며 width값을 주어야 크로스 브라우징 됩니다. - float된 박스들을 감싸는 박스에 height값을 줍니다.
본문 내용엔 높이를 주지 않으므로 세로 사이즈가 불변일 경우가 아니면 사용할 수 없습니다.
/* 요소를 왼쪽으로 이동 */
.class {
float: left;
}
/* 요소를 오른쪽으로 이동 */
.class {
float: right;
}
/* float 속성을 해제 */
.class {
clear: both;
}