clearfix 클래스의 의미

질문 : clearfix 란 무엇입니까?

---

최근에 일부 웹 사이트의 코드를 살펴보고 모든 <div> clearfix 클래스가 있음을 clearfix .

빠른 Google 검색 후 때때로 IE6 용이라는 것을 알게되었지만 실제로 clearfix는 무엇입니까?

clearfix가없는 레이아웃과 비교하여 clearfix가있는 레이아웃의 몇 가지 예를 제공 할 수 있습니까?

답변

---

오늘날 레이아웃에 플로팅 요소를 사용하는 것이 더 나은 대안을 사용함에 따라 점점 더 낙담되고 있다는 점에 주목할 가치가 있습니다.

• display: inline-block -더 좋음
• Flexbox- 최고 (그러나 제한된 브라우저 지원)

Flexbox는 Firefox 18, Chrome 21, Opera 12.10, Internet Explorer 10, Safari 6.1 (모바일 Safari 포함) 및 Android의 기본 브라우저 4.4에서 지원됩니다.

자세한 브라우저 목록은 https://caniuse.com/flexbox를 참조하십시오.

(아마도 위치가 완전히 정해지면 요소를 배치하는 데 절대적으로 권장되는 방법 일 수 있습니다.)

---

clearfix는 요소가 자식 요소를 자동으로 지우는 방법이므로 추가 마크 업을 추가 할 필요가 없습니다. 일반적으로 요소가 가로로 쌓 이도록 플로팅되는 플로트 레이아웃에서 사용됩니다.

clearfix는 플로팅 요소의 높이가 0 인 컨테이너 문제 를 해결하는 방법입니다.

clearfix는 다음과 같이 수행됩니다.

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

또는 IE <8 지원이 필요하지 않은 경우 다음도 괜찮습니다.

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

일반적으로 다음과 같은 작업을 수행해야합니다.

<div>
    <div style="float: left;">Sidebar</div>
    <div style="clear: both;"></div> <!-- Clear the float -->
</div>

clearfix를 사용하면 다음 만 필요합니다.

<div class="clearfix">
    <div style="float: left;" class="clearfix">Sidebar</div>
    <!-- No Clearing div! -->
</div>

이 기사에서 이에 대해 읽어보십시오 -by Chris Coyer @ CSS-Tricks

출처 : https://stackoverflow.com/questions/8554043/what-is-a-clearfix