CSS 'clearfix' 를 사용하는 방법

질문 : 어떤 'clearfix'방법을 사용할 수 있습니까?

---

2 열 레이아웃을 래핑하는 div 의 오래된 문제가 있습니다. 내 사이드 바가 플로팅되어 컨테이너 div 가 콘텐츠와 사이드 바를 래핑하지 못합니다.

<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

Firefox에서 명확한 버그를 수정하는 방법은 여러 가지가 있습니다.

• <br clear="all"/>
• overflow:auto
• overflow:hidden

제 상황에서 제대로 작동하는 유일한 <br clear="all"/> 솔루션입니다. overflow:auto 는 나에게 불쾌한 스크롤바를 제공하고 overflow:hidden 에는 반드시 부작용이 있어야합니다. 또한 IE7은 잘못된 동작으로 인해이 문제를 겪지 않아야하지만 내 상황에서는 Firefox와 동일하게 고통 받고 있습니다.

현재 사용 가능한 가장 강력한 방법은 무엇입니까?

답변

---

생성되는 디자인에 따라 아래의 clearfix CSS 솔루션에는 각각 고유 한 이점이 있습니다.

clearfix에는 유용한 응용 프로그램이 있지만 해킹으로도 사용되었습니다. clearfix를 사용하기 전에 다음과 같은 최신 CSS 솔루션이 유용 할 수 있습니다.

• CSS 플렉스 박스
• CSS 그리드

---

최신 Clearfix 솔루션

---

Container with overflow: auto;

플로팅 요소를 지우는 가장 간단한 방법은 포함하는 요소에 overflow: auto 이 솔루션은 모든 최신 브라우저에서 작동합니다.

<div style="overflow: auto;">
  <img
    style="float: right;"
    src="path/to/floated-element.png"
    width="500"
    height="500"
  > 
  <p>Your content here…</p>
</div>

한 가지 단점은 외부 요소에 여백과 패딩의 특정 조합을 사용하면 스크롤바가 나타날 수 있지만 여백과 패딩을 다른 부모 포함 요소에 배치하여 해결할 수 있습니다.

'overflow : hidden'을 사용하는 것도 명확한 해결책이지만 스크롤바가 없지만 hidden 을 사용하면 포함 된 요소 외부에있는 모든 콘텐츠가 잘립니다.

참고 : 이 예에서 부동 요소는 img 태그이지만 모든 html 요소 일 수 있습니다.

---

Clearfix 다시 로드됨

CSSMojo의 Thierry Koblentz는 다음과 같이 썼습니다. 최신 clearfix reloaded . 그는 oldIE에 대한 지원을 중단함으로써 솔루션을 하나의 css 문으로 단순화 할 수 있다고 언급했습니다. 또한 display: block ( display: table 대신)을 사용하면 clearfix가있는 요소가 형제 일 때 여백이 제대로 축소 될 수 있습니다.

.container::after {
  content: "";
  display: block;
  clear: both;
}

이것은 가장 최신 버전의 clearfix입니다.

---

⋮

⋮

이전 Clearfix 솔루션

아래 솔루션은 최신 브라우저에는 필요하지 않지만 이전 브라우저를 대상으로하는 데 유용 할 수 있습니다.

이러한 솔루션은 브라우저 버그에 의존하므로 위의 솔루션 중 어느 것도 작동하지 않는 경우에만 사용해야합니다.

대략 시간순으로 나열됩니다.

---

최신 브라우저용 클리어픽스인 "Beat That ClearFix"

CSS Mojo 의 Thierry Koblentz는 최신 브라우저를 대상으로 할 때 이제 zoom / 축소와 ::before 속성 / 값을 삭제하고 간단히 다음을 사용할 수 있다고 지적했습니다.

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

이 솔루션은 의도적으로 IE 6/7을 지원하지 않습니다!

Thierry는 또한 다음과 같은 기능을 제공합니다. " 주의 사항 : 새 프로젝트를 처음부터 시작하는 경우 시도해보세요.하지만 oldIE를 지원하지 않더라도 기존 규칙으로 인해 접히는 여백. "

---

Micro Clearfix

가장 최근에 전 세계적으로 채택 된 clearfix 솔루션 인 Nicolas Gallagher 의 Micro Clearfix입니다.

알려진 지원 : Firefox 3.5 이상, Safari 4 이상, Chrome, Opera 9 이상, IE 6 이상

.container::before, .container::after {
  content: "";
  display: table;
}
.container::after {
  clear: both;
}
.container {
  zoom: 1;
}

---

Overflow Property

이 기본 방법은 배치 된 콘텐츠가 컨테이너 경계 외부에 표시되지 않는 일반적인 경우에 선호됩니다.

http://www.quirksmode.org/css/clearing.html- 이 기술과 관련된 일반적인 문제, 즉 컨테이너에서 width: 100%

.container {
  overflow: hidden;
  display: inline-block;
  display: block;
}

display 속성을 사용하여 IE의 "hasLayout"을 설정하는 대신 요소에 대한 "hasLayout"을 트리거 하는 데 다른 속성을 사용할 수 있습니다.

.container {
  overflow: hidden;
  zoom: 1;
  display: block;
}

overflow 속성을 사용하여 float를 지우는 또 다른 방법 은 underscore hack 을 사용하는 것입니다. IE는 밑줄이 붙은 값을 적용하지만 다른 브라우저는 적용하지 않습니다. zoom 속성은 IE에서 hasLayout 을 트리거합니다.

.container {
  overflow: hidden;
  _overflow: visible; /* for IE */
  _zoom: 1; /* for IE */
}

이것이 작동하는 동안 ... 핵을 사용하는 것은 이상적이지 않습니다.

---

PIE: Easy Clearing Method

이 오래된 "Easy Clearing"방법은 더 까다로운 CSS를 희생하면서 배치 된 요소가 컨테이너 경계 외부에 매달릴 수 있다는 장점이 있습니다.

이 솔루션은 꽤 오래되었지만 Position Is Everything에 대한 Easy Clearing에 대한 모든 것을 배울 수 있습니다 : http://www.positioniseverything.net/easyclearing.html

---

Element using "clear" property

빠르게 무언가를 함께 때리는 경우에 대한 빠르고 더러운 솔루션 (몇 가지 단점이 있음) :

<br style="clear: both" /> <!-- So dirty! -->

단점

• 반응하지 않으므로 레이아웃 스타일이 미디어 쿼리에 따라 변경되면 원하는 효과를 제공하지 못할 수 있습니다. 순수한 CSS의 솔루션이 더 이상적입니다.
• 의미 값을 반드시 추가하지 않고 html 마크 업을 추가합니다.
• CSS에서 "clearfix"의 단일 솔루션에 대한 클래스 참조와 html에서 이에 대한 클래스 참조가 아니라 각 인스턴스에 대한 인라인 정의 및 솔루션이 필요합니다.
• 다른 사람들이 코드를 처리하기 위해 더 많은 해킹을 작성해야 할 수 있으므로 코드 작업을 어렵게 만듭니다.
• 앞으로 다른 clearfix 솔루션이 필요하거나 사용하고 싶을 때 돌아가서 마크 업 주위에 흩어져있는 <br style="clear: both" />

출처 : https://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use