728x90
float 속성은 원래 이미지와 텍스트 배치 용도로 등장했지만, 요즘에는 레이아웃용으로 많이 사용하고 있습니다.<div> 태그를 float 속성 및 width, height 속성 등을 이용하여 레이아웃을 배치하는 방식입니다.
float
- block 요소는 원래 세로로만 나열되지만 float을 이용하여 가로로 배치할 수 있다.
- float은 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성인데, 세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려할 때 유용하다.
- float한 박스에 가로 사이즈를 지정해 주어야 크로스브라우징 된다. 그러나 heading요소나 인라인 요소들은 가로 사이즈 없이 float해도 레이아웃이 흐트러지지 않는다.
속성 값 | 속성 설명 |
left | 요소를 왼쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 한다. |
right | 요소를 오른쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 한다. |
inherit | 부모 요소에서 상속하도록 한다. |
none | 요소를 부유하지않도록 foloat을 취소한다. |