Clearfix 란 무엇입니까?

최근에 나는 웹 사이트의 코드를 살펴보고 모든 <div> 클래스 가 있다는 것을 알았 습니다 clearfix.

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

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

IE9 이하를 지원할 필요가 없으면 flexbox를 자유롭게 사용할 수 있으며 플로팅 레이아웃을 사용할 필요가 없습니다.

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

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

Flexbox는 Firefox 18, Chrome 21, Opera 12.10 및 Internet Explorer 10, Safari 6.1 (Mobile 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>

이 기사 에서 그것에 대해 읽으십시오 -Chris Coyer @ CSS-Tricks

다른 답변은 맞습니다. 그러나 나는 사람들이 CSS를 처음 배우고 float모든 레이아웃을 수행하기를 학대했던 시간의 유물이라고 덧붙이고 싶습니다 . float긴 텍스트 옆에 떠 다니는 이미지와 같은 작업을 수행하기 위해 많은 사람들이 기본 레이아웃 메커니즘으로 사용했습니다. 실제로는 그런 의미가 아니기 때문에 "clearfix"와 같은 핵이 필요합니다.

요즘 display: inline-block(고체 대안 IE6와 IE7을 제외하고 더 현대적인 브라우저 등 인 flexbox, 그리드 레이아웃, 같은 이름으로 더 유용한 레이아웃 메커니즘오고 있지만,)

는 clearfix컨테이너가 떠내려 아이를 포장 할 수 있습니다. clearfix스타일링 이 없거나 이와 동등한 스타일이 없으면 컨테이너는 떠 다니는 자식이 절대적으로 배치 된 것처럼 떠 다니는 자식을 감싸거나 접히지 않습니다.

clears에는 몇 가지 버전이 있으며 Nicolas Gallagher 와 Thierry Koblentz 가 주요 저자로 사용됩니다.

구형 브라우저를 지원하려면 다음 clearfix를 사용하는 것이 가장 좋습니다.

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

SCSS에서는 다음 기술을 사용할 수 있습니다.

%clearfix {
    &:before, &:after {
        content:" ";
        display:table;
    }

    &:after {
        clear:both;
    }

    & {
        *zoom:1;
    }
}

#clearfixedelement {
    @extend %clearfix;
}

구형 브라우저 지원에 신경 쓰지 않는다면 더 짧은 버전이 있습니다.

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

2017 년 2 분기 상황에 대한 업데이트를 제공합니다.

Firefox 53, Chrome 58 및 Opera 45 에서 새로운 CSS3 디스플레이 속성을 사용할 수 있습니다 .

.clearfix {
   display: flow-root;
}

여기에서 모든 브라우저의 가용성을 확인하십시오. http://caniuse.com/#feat=flow-root

표시 속성이 흐름 루트로 설정된 요소는 블록 컨테이너 상자를 생성하고 흐름 레이아웃을 사용하여 내용을 배치합니다. 항상 내용에 대한 새로운 블록 서식 컨텍스트를 설정합니다.

하나 또는 여러 개의 부동 하위를 포함하는 상위 div를 사용하는 경우이 속성은 상위 하위가 모든 하위를 포함하도록합니다. 명확한 해킹이 필요하지 않습니다. 모든 하위 또는 마지막 더미 요소 (마지막 하위에서 : fore와 함께 clearfix 변형을 사용하는 경우).

.container {
  display: flow-root;
  background-color: Gainsboro;
}

.item {
  border: 1px solid Black;
  float: left;
}

.item1 {  
  height: 120px;
  width: 120px;
}

.item2 {  
  height: 80px;
  width: 140px;
  float: right;
}

.item3 {  
  height: 160px;
  width: 110px;
}

<div class="container">
  This container box encloses all of its floating children.
  <div class="item item1">Floating box 1</div>
  <div class="item item2">Floating box 2</div> 
  <div class="item item3">Floating box 3</div>  
</div>

간단히 말해서, clearfix는 핵 입니다.

그것은 떠 다니는 자식 요소가 부모에게 넘치지 않도록하는 유일한 합리적인 방법이기 때문에 우리 모두가 함께 해야하는 추악한 것 중 하나입니다. 다른 레이아웃 구성표가 있지만 오늘날 웹 디자인 / 개발에서 부동 해킹의 가치를 무시하기에는 플로팅이 너무 일반적입니다.

나는 개인적으로 Micro Clearfix 솔루션 (Nicolas Gallagher)에 의지합니다.

.container:before,
.container:after {
  content:"";
  display:table;
}
.container:after {
  clear:both;
}
.container {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

참고

CSS 부동 기반 레이아웃에서 일반적으로 사용되는 기술은 소수의 CSS 속성을 부동 요소를 포함 할 요소에 할당하는 것입니다. 일반적으로이라는 클래스 정의를 사용하여 구현되는이 기술 clearfix은 다음과 같은 CSS 동작을 구현합니다.

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    zoom: 1
}

이러한 결합 된 동작의 목적은 :after단일 '.'을 포함하는 활성 요소를 컨테이너에 작성하는 것 입니다. 기존 플로트를 모두 지우고 다음 콘텐츠에 대한 페이지를 효과적으로 재설정하는 숨겨진 것으로 표시됩니다.

clearfix를 얻기위한 다른 (아마도 가장 간단한) 옵션 overflow:hidden;은 포함 요소에 사용 하는 것입니다. 예를 들어

.parent {
  background: red;
  overflow: hidden;
}
.segment-a {
  float: left;
}
.segment-b {
  float: right;
}

<div class="parent">
  <div class="segment-a">
    Float left
  </div>
  <div class="segment-b">
    Float right
  </div>
</div>

물론 이것은 내용이 넘치길 원하지 않는 경우에만 사용할 수 있습니다.

나는 대답을 시도했지만 여전히 내용 정렬에 문제가있었습니다. 아래와 같이 ": 전에"선택기를 추가하면 문제가 해결되었습니다.

// LESS HELPER
.clearfix()
{
    &:after, &:before{
       content: " "; /* Older browser do not support empty content */
       visibility: hidden;
       display: block;
       height: 0;
       clear: both;
    }
}

위의 LESS는 아래 CSS로 컴파일됩니다.

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

여기에 다른 방법은 같지만 조금 다릅니다.

차이점은 컨텐츠 점이며 \00A0== 로 대체됩니다.whitespace

이 http://www.jqui.net/tips-tricks/css-clearfix/ 에 대한 추가 정보

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}

여기에 컴팩트 버전이 있습니다 ...

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block}