프로그래밍(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 요소의 위치를 인정함.)