프로그래밍(Programming)/CSS
CSS 중급 - Float Layout
SuperKid
2018. 8. 22. 22:45
< 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 요소의 위치를 인정함.)