CSS 레이아웃 플로팅

플로팅 속성

• 플로팅 요소의 너비는 수축하고 일반적인 흐름에서 벗어난다.
• 인접 후행 블록 요소는 플로팅 요소와 겹치고 인라인 요소(+텍스트 요소)는 플로팅 요소 주변으로 흐른다.
• clear, flow-root 속성으로 해제할 수 있다.
• 컬럼을 배치하는 속성이 아니다.

플로팅 해제

1. 부모 요소에 float / 자식 요소에 float
2. 자식 요소 하단에 blank enlement 넣고 clear:both 속성
3. 부모 요소에 overflow: hidden
4. 부모 요소에 display: inline-block
5. 부모 요소 after에 clear: both
6. 부모요소에 display: flow-root (ie에서는 안됨)

float & display

1. float가 되면 display: block가 된다.
2. display 속성이 없어도 width, hieght, 수직 margin, padding 속성을 사용할 수 있다.
3. 따라서 보통의 경우 display 속성을 명시할 필요가 없다.

column layout

1. columns: column-width || column-count / coumns-gap / column-rule
2. break-inside: avoid

---

REFERENCE
패스트 캠퍼스 The RED : 견고한 UI 설계를 위한 마크업 가이드 _ 정찬명 강사님