< 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

+ Recent posts