Float를 해제하는 방법

마크업 후 CSS 작성시 특히 가로배치의 메뉴들을 작업할때! flex 속성을 사용하면 편하겠지만 ie 구형 브라우저에서도 동일하게 보여야하는 상황일때는 float를 이용한 배치를 해야하는데 이 속성을 사용하여 컨텐츠를 정렬하면 적용한 자식요소가 마치 position:absolute를 적용한 것 마냥 붕(?)뜨기 때문에 부모요소가 인식을 하지 못합니다. 이럴때 사용하는 방법이 부모 요소에 clearfix를 적용하는 것인데.. 가상 선택자를 활용하여 float로 인해 비워진 공간을 채워주는 것입니다.

clearfix의 네 가지 방법

1. 가상 요소 ::after 사용(권장)
2. overflow속성 사용
3. 빈 엘리먼트로 clear속성 적용
4. float로 대응

1번 방법이 가장 많이 사용되고 2~4번은 저런 방법도 있구나 정도만 알아도 전혀 업무하는데 지장이 없습니다.

우선 가상 선택자란 가상 클래스(class)와 가상 요소(element)를 편의상 함께 칭할 때 사용하며, 정식 명칭은 아닙니다.
가상 클래스(Pseudo-class)는 요소에 직접적으로 클래스를 부여하지는 않았지만, 요소의 상태에 따라서 클래스를 적용한 것처럼 효과를 다르게 줄 수 있는 것을 말합니다. 대표적으로 a태그의 효과를 바꾸기 위한 a:hover, a:link 등이 있으며, 이때 a뒤에 쓰인 :hover, :link를 가상 클래스라고 합니다.

가상 요소(Pseudo-elements)는 말 그대로 가상의 요소를 만들고 내용을 넣어 출력하겠다는 뜻으로 보통 ::after, ::before을 자주 사용합니다. CSS2.1에서는 가상 클래스와 가상 요소 모두 싱글콜론(:)을 사용했지만, CSS3 부터는 둘을 구분하기 위해 가상 클래스는 싱글콜론(:), 가상 요소는 더블콜론(::)을 사용합니다.

가상요소 ::after로 어떻게 clearfix를 하는가?

float 속성을 적용한 요소의 부모 요소에 ::after 가상 선택자를 사용합니다.
아래 예시처럼 nav태그 안에 h1태그는 float: left, ul태그에 float: right가 적용되어 있을때 clearfix 적용방법입니다.
(예시 코드의 float 속성은 설명을 위해 넣은것이며 실무에선 태그에 내부 스타일 적용하는 것 지양해야돼요!)

• 일반적인 clearfix 방법

<nav> <!--nav 태그에 ::after 가상요소 선택 -->
  <h1 style="float:left">logo_text</h1>
  <ul style="float:right">gnb_area</ul>
</nav>

nav::after {
  content: '';
  dispaly: table;
  clear: both
}

• 실무에서 많이 사용하는 방법

<nav class="clearfix"> <!--자식 태그에 float가 적용된 태그에 clearfix 클래스 적용 -->
  <h1 style="float:left">logo_text</h1>
  <ul style="float:right">gnb_area</ul>
</nav>

.clearfix::after {
  content: '';
  dispaly: table;
  clear: both
}

무슨 뜻인지 알아보면 nav 태그 뒤에 내용이 빈(content: '') 테이블을(display: table) 만들고, float: left, float: right를 초기화 시키겠다는 뜻입니다. 이렇게 작성을 해주면 nav태그 뒤에 다른 내용을 작성을 하면 위로 딸려올라가지 않고 nav태그 다음에 위치하게 됩니다.
display: table 대신 display: block으로 사용해도 무방하며, clear: left를 쓰면 float: left를, clear: right를 쓰면 float: right를 초기화 한다는 뜻인데 항상 clear: both를 사용하면 됩니다.



출처: https://takeuu.tistory.com/60 [워너비스페셜]