Float

• 컬럼 배치를 위한 속성이 아니다. 본래는 이미지와 텍스트를 흐름배치하기 위한 속성.
• 요소에 플로팅을 적용하면, 주변 텍스트(혹은 인라인 요소)는 흐르게 만들지만, 주변 박스 요소들은 플로팅된 요소와 겹치게 된다.
• 플로팅 요소의 너비는 수축하고 일반적인 흐름에서 벗어난다. (부모요소는 플로팅된 자식 요소의 높이를 감지하지 못한다.)
• clear, flow-root 속성으로 해제할 수 있다.

Float Clearing

• float를 clearing 해주어야 비로소 우리가 기대한대로 부모 요소가 자식 요소의 높이를 인지할 수 있게 된다.
• clearing 방법1: 부모요소에 float 적용
• clearing 방법2: 마지막에 blank element를 추가하고, 여기에 clear: both 추가
• clearing 방법3: 부모요소에 overflow: hidden;
• clearing 방법4: 부모요소에 display: inline-block;
• clearing 방법5: 부모요소에 ::after { clear: both };
• clearing 방법6: 부모요소에 display: flow-root; (IE에서 지원 안함)
• clear 속성은 block 요소에만 추가 가능!

Float & display

• float 속성이 들어가면, display 속성이 block으로 변경됨! (때문에 float와 display 속성을 함께 이용할 필요가 없다.)

Column Layout

• CSS에 columns라는 속성이 존재함.
• div를 세개나 만들 필요가 없음. 하나의 div로도 원하는 만큼의 컬럼을 만들어서 텍스트를 배치할 수 있다.

div {
  column-count: 3;
}

• 컬럼 내용을 중간에서 자르지 않도록 하는 속성. break-inside: avoid