css float에 대하여

float 속성은 이미지를 배치하고 주변으로 텍스트를 흐르게 할 용도로 만들어졌다.

동시에 박스요소 끼리는 겹치게 만든다.

특징

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

해제하는 법

해제하는 법에는 여러 방법이 있다.

1. 부모 요소에 float 적용하기
2. 자식 요소의 마지막에 빈 element에 clear 속성 추가하기
3. 부모요소에 overflow:hidden 추가하기
4. 부모요소의 display를 inline-block으로 바꾸기
5. 부모요소에 after를 이용하여 clear속성 추가하기
6. 부모요소를 display:flow-root를 추가하기

float과 display

float 속성이 들어간 요소는 display가 block이 된다.

display 속성이 없어도 float을 사용하면 width/height 수직 margin/padding을 사용할 수 있다.

columns <’column-width’> || <’column-count’>

columns 속성을 사용하면 div 하나에서 세 개의 column으로 만들 수 있다.

 {
  columns: 310px 2;
  column-gap: 20px;
  column-rule: 20px solid #0002;

  break-inside: avoid;
  /* box 내부에서 자르지 않는다. */
}

https://flexboxfroggy.com/#ko
https://t.ly/2kOk