728x90
반응형
float
block 요소는 원래 세로로만 나열되지만 float을 이용하여 가로로 배치할 수 있습니다.
float은 레이아웃을 완성하기 위한 필수적인 속성이며 float을 지정하는 방법과 함께
float을 해제하는 방법도 알아두어야 나머지 레이아웃을 완성할 수 있습니다.
float은 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성입니다.
세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 매우 유용합니다.
float한 박스에 가로 사이즈를 지정해 주어야 크로스 브라우징 됩니다.
그러나 heading 요소나 인라인 요소들은 가로 사이즈 없이 float해도 레이아웃이 흐트러지지 않습니다.
float: left;
| 속성 값 | 속성 설명 |
| left | 요소를 왼쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 함 |
| right | 요소를 오른쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 함 |
float: right;
float: left와 좌측이 아닌 우측에 붙는다는 것 외에 큰 차이가 없다.
clear: both;
속성은 부모 요소의 높이를 자식 요소의 높이에 맞추는 데 사용됩니다.
float 해제하는 몇 가지 방법
지금까지 알아본 바로 float을 해제하지 않으면 다음 박스들에 레이아웃이 틀어지며, 또한 float된 박스를 감싸는 박스에 부여된 배경, 테두리 여백 등이 제대로 나타나지 않았습니다. 따라서 레이아웃을 제대로 표현하는데 float 해제는 반드시 필요합니다. clear를 쓰지 않아도 해제되는 경우들을 알아봅시다.
| 방법 | 속성 설명 |
| 1 | ● float된 요소를 감싸는 박스가 이미 float 되어 있는 경우 ● 우연히 일어난 경우가 드물며, 어차피 감싸는 박스의 float을 해제해야 함 |
| 2 | ● float된 요소를 감싸는 박스에 overflow: auto;한다. ● 세로 스크롤바가 생길 경우 사용할 수 없으며 width값 주어야 크로스 브라우징 됨 |
| 3 | ● float된 박스들을 감싸는 박스에 height값을 준다. ● 본문 내용엔 높이를 주지 않으므로 세로 사이즈가 불변일 경우 아니면 사용불능 |