< CSS 중급 - Float Layout >
- float: left; (아래쪽 요소들이 float 요소의 자리로 올라와서 겹치게 보임.)
- 글과 그림을 자연스럽게 배치하는데 주로 사용됨.
- float 요소끼리는 겹치지 않고 옆으로 나열되어 배치됨.
- float된 요소는 상위 tag가 자식 요소로 인정하지 않아서 상속 효과가 적용되지 않음.
- flaot 요소에서 parent tag의 css 효과를 상속되게 하려면, parent tag에 overflow: hidden, auto, scroll 등의 속성을 부여함.
- overflow 는 스크롤을 나타나게 하거나 제어하는 property 임.
- footer 가 float 된 윗쪽 요소의 자리를 차지하지 않게 하려면(겹쳐지지 않게 하려면), footer 에 clear: left; 의 속성을 부여함. (left를 주면 왼쪽의 float 요소의 위치를 인정함.)
'프로그래밍(Programming) > CSS' 카테고리의 다른 글
CSS 중급 - z-index (0) | 2018.08.22 |
---|---|
CSS 중급 - Flex Layout (0) | 2018.08.22 |
CSS 중급 - Position Layout (0) | 2018.08.22 |
CSS 중급 - 상속, Cascading (0) | 2018.08.22 |
CSS 중급 - css code의 재사용 (0) | 2018.08.22 |