Fast Blinking Hello Kitty

CSS

레이아웃 float에 대하여 알아봅시다.

코른이되고싶은코린이 2023. 2. 24. 18:13

728x90

 

float 속성은 원래 이미지와 텍스트 배치 용도로 등장했지만, 요즘에는 레이아웃용으로 많이 사용하고 있습니다.<div> 태그를 float 속성 및 width, height 속성 등을 이용하여 레이아웃을 배치하는 방식입니다.

 

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

 

float의 예시1

                이미지출처

 

float의 예시2

이미지출처2