[CSS] clearfix - 자식요소가 높이를 모두 잃었을때 부모요소에세 자식요소 높이 알려주는 법 / overflow:hidden 처럼 영역을 가지게 하는 경우 css

clearfix란?

문서의 구조에서 부모요소가 자식요소를 감싸고 있는 형태에서 자식에게 float요소나, positioon을 적용하면 부모가 더 이상 자식을 감싸지 않게 된다. 그래서 부모의 높이가 0px가 되는 현상이다.😥

 

clearfix방법

1️⃣ 첫번째 방법

가장 기본적인 방법으로, overflow:hidden;을 부모에게 설정한다.

부모요소{overflow:hidden}

 

2️⃣ 두번째 방법

부모요소:after에게 아래 css를 적용한다.

부모요소:after { content: ""; clear: both; display: table; }

 

3️⃣ 세번쨰 방법

부모요소에 display: flow-root; 를 적용한다. (edge에서는 지원하나 IE에서 지원안함)

부모 {
  display: flow-root;
  /* overflow: hidden과 관련되어 있음 */
  /* 실무에서는 부모요소에 clearfix를 주는 방법을 많이 사용 */
}

자식 {
  float: left;
}