clearfix 란 무엇입니까?

clearfix 란 무엇입니까?

---

최근에 나는 일부 웹 사이트의 코드를 살펴 보았는데 모든 <div>사람들이 clearfix.

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

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

---

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

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

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

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

자세한 브라우저 목록은 http://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

---

시각화를 통해 배우는 경우이 그림은 clearfix의 기능 을 이해하는 데 도움이 될 수 있습니다 .

---

다른 대답은 맞습니다. 그러나 나는 사람들이 처음 CSS를 배우고 float모든 레이아웃을 수행하도록 학대 를 받았던 당시의 유물이라고 덧붙이고 싶습니다 . float긴 텍스트 옆에 플로팅 이미지와 같은 작업을 수행하기위한 것이지만 많은 사람들이이를 기본 레이아웃 메커니즘으로 사용했습니다. 실제로 그 의미가 아니었기 때문에 작동하려면 "clearfix"와 같은 해킹이 필요합니다.

요즘 display: inline-block은 ( IE6 및 IE7 제외) 견고한 대안 이지만 더 많은 최신 브라우저는 flexbox, 그리드 레이아웃 등과 같은 이름으로 훨씬 더 유용한 레이아웃 메커니즘을 제공합니다.

---

는 clearfix컨테이너가 떠내려 아이를 포장 할 수 있습니다. clearfix또는 이와 동등한 스타일이 없으면 컨테이너는 플로팅 된 하위 항목을 감싸지 않고 마치 플로팅 된 하위 항목이 절대 위치에있는 것처럼 축소됩니다.

clearfix에는 몇 가지 버전이 있으며 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;
}

---

To offer an update on the situation on Q2 of 2017.

A new CSS3 display property is available in Firefox 53, Chrome 58 and Opera 45.

.clearfix {
   display: flow-root;
}

Check the availability for any browser here: http://caniuse.com/#feat=flow-root

The element (with a display property set to flow-root) generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents.

Meaning that if you use a parent div containing one or several floating children, this property is going to ensure the parent encloses all of its children. Without any need for a clearfix hack. On any children, nor even a last dummy element (if you were using the clearfix variant with :before on the last children).

.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>

---

Simply put, clearfix is a hack.

It is one of those ugly things that we all just have to live with as it is really the only reasonable way of ensuring floated child elements don't overflow their parents. There are other layout schemes out there but floating is too commonplace in web design/development today to ignore the value of the clearfix hack.

I personally lean towards the Micro Clearfix solution (Nicolas Gallagher)

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

reference

---

A technique commonly used in CSS float-based layouts is assigning a handful of CSS properties to an element which you know will contain floating elements. The technique, which is commonly implemented using a class definition called clearfix, (usually) implements the following CSS behaviors:

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

The purpose of these combined behaviors is to create a container :after the active element containing a single '.' marked as hidden which will clear all preexisting floats and effectively reset the the page for the next piece of content.

---

The other (and perhaps simplest) option for acheiving a clearfix is to use overflow:hidden; on the containing element. For example

.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>

Of course this can only be used in instances where you never wish the content to overflow.

---

I tried out the accepted answer but I still had a problem with the content alignment. Adding a ":before" selector as shown below fixed the issue:

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

LESS above will compile to CSS below:

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

---

Here is a different method same thing but a little different

the difference is the content dot which is replaced with a \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}

참고 URL : https://stackoverflow.com/questions/8554043/what-is-a-clearfix