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

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

---

div2 열 레이아웃을 래핑하는 오래된 문제가 있습니다. 내 사이드 ​​바가 플로팅되어 컨테이너 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 솔루션

---

컨테이너 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는 다음과 같이 썼습니다. The 최신 clearfix reloaded . 그는 oldIE에 대한 지원을 중단함으로써 솔루션을 하나의 css 문으로 단순화 할 수 있다고 언급했습니다. 또한 display: block(대신 display: table)를 사용하면 clearfix가있는 요소가 형제 일 때 여백이 제대로 축소됩니다.

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

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

---

⋮

⋮

이전 Clearfix 솔루션

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

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

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

---

최신 브라우저를위한 clearfix 인 "Beat That ClearFix"

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

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

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

Thierry는 또한 다음과 같은 기능을 제공합니다. " 주의 사항 : 새 프로젝트를 처음부터 시작하는 경우 계속 진행하되, oldIE를 지원하지 않더라도 기존 규칙이이를 방지하기 때문에이 기술을 현재 가지고있는 기술과 바꾸지 마십시오. 접히는 여백. "

---

마이크로 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;
}

---

오버플로 속성

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

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속성을 사용 하여 플로트를 지우는 또 다른 방법 은 밑줄 해킹 을 사용하는 것 입니다. IE는 밑줄이 붙은 값을 적용하지만 다른 브라우저는 적용하지 않습니다. zoom속성은 트리거 hasLayout의를 IE에서 :

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

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

---

PIE : 간편한 삭제 방법

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

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

---

"clear"속성을 사용하는 요소

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

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

단점

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

---

우리가 해결하려는 문제는 무엇입니까?

물건을 떠 다니는 경우 두 가지 중요한 고려 사항이 있습니다.

1. 하위 수레 포함. 이는 문제의 요소가 모든 부동 하위 항목을 감쌀 수있을만큼 높이가 높다는 것을 의미합니다. (그들은 밖에 매달리지 않습니다.)

   

2. 외부 수레에서 후손을 격리합니다. 즉, 요소 ​​내부의 하위 항목은 clear: both요소 외부의 부동 소수점과 상호 작용하지 않고 사용할 수 있어야합니다 .

   

블록 서식 컨텍스트

이 두 가지를 모두 수행하는 방법은 하나뿐입니다. 그리고 그것은 새로운 블록 형식화 컨텍스트 를 설정하는 것 입니다. 블록 형식화 컨텍스트를 설정하는 요소는 부동 체가 서로 상호 작용하는 절연 된 사각형입니다. 블록 서식 컨텍스트는 항상 플로팅 하위 항목을 시각적으로 래핑 할 수있을만큼 충분히 크며 블록 서식 컨텍스트 외부의 부동 요소는 내부 요소와 상호 작용할 수 없습니다. 이 양방향 절연은 정확히 원하는 것입니다. IE에서는 이와 동일한 개념을 hasLayout 이라고 하며을 통해 설정할 수 있습니다 zoom: 1.

이 컨텍스트를 포맷 블록을 설정하는 방법은 여러 가지가 있지만, 내가 추천하는 솔루션입니다 display: inline-block함께 width: 100%. (물론, 거기에 일반적인주의 사항 사용으로 width: 100%사용하므로 box-sizing: border-box이나 넣어 padding, margin그리고 border다른 요소.)

가장 강력한 솔루션

아마도 float의 가장 일반적인 응용은 2 열 레이아웃입니다. (3 단까지 확장 가능)

먼저 마크 업 구조입니다.

<div class="container">
  <div class="sidebar">
    sidebar<br/>sidebar<br/>sidebar
  </div>
  <div class="main">
    <div class="main-content">
      main content
      <span style="clear: both">
        main content that uses <code>clear: both</code>
      </span>
    </div>
  </div>
</div>

그리고 이제 CSS입니다.

/* Should contain all floated and non-floated content, so it needs to
 * establish a new block formatting context without using overflow: hidden.
 */
.container {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

/* Fixed-width floated sidebar. */
.sidebar {
  float: left;
  width: 160px;
}

/* Needs to make space for the sidebar. */
.main {
  margin-left: 160px;
}

/* Establishes a new block formatting context to insulate descendants from
 * the floating sidebar. */
.main-content {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

직접 시도

JS Bin 으로 이동 하여 코드를 가지고 놀 면서이 솔루션이 어떻게 처음부터 빌드되는지 확인하십시오.

유해한 것으로 간주되는 기존의 clearfix 방법

전통적인 clearfix 솔루션 의 문제점 은 IE와 다른 모든 사람들에게 동일한 목표를 달성하기 위해 두 가지 다른 렌더링 개념을 사용한다는 것입니다. IE에서는 hasLayout을 사용하여 새 블록 서식 컨텍스트를 설정하지만 다른 모든 사용자에 대해 생성 된 상자 ( :after)를 사용 clear: both하여 새 블록 서식 컨텍스트를 설정하지 않습니다. 이것은 모든 상황에서 일이 동일하게 작동하지 않을 것임을 의미합니다. 이것이 왜 나쁜지에 대한 설명 은 Clearfix에 대해 아는 모든 것이 잘못된 것을 참조하십시오 .

---

Inuit.css 및 Bourbon에서 사용하는 새로운 표준 -매우 널리 사용되고 잘 관리되는 두 가지 CSS / Sass 프레임 워크 :

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

---

메모

clearfix는 본질적으로 flexbox 레이아웃이 훨씬 더 현명한 방식으로 제공 할 수있는 것에 대한 핵이라는 것을 명심하십시오 . CSS 플로트는 원래 인라인 콘텐츠가 그리드 레이아웃 등이 아닌 긴 텍스트 기사의 이미지처럼 흐르도록 설계되었습니다. 귀하의 경우 대상 브라우저 인 flexbox를 지원 , 그것의 가치를 찾고.

이것은 IE7을 지원하지 않습니다. 당신은 안 IE7을 지원한다. 이렇게하면 사용자와 조직이 최신 브라우저로 전환해야하는 부담이 줄어들 기 때문에 사용자가 수정되지 않은 보안 공격에 계속 노출되고 다른 모든 웹 개발자의 삶이 더 어려워집니다.

이 clearfix는 2012 년 7 월 Thierry Koblentz 에 의해 발표되고 설명되었습니다 . Nicolas Gallagher의 2011 년 micro-clearfix 에서 불필요한 무게를 제거 했습니다 . 이 과정에서 사용자가 사용할 수 있도록 의사 요소를 해제합니다. 이것은 (다시 Thierry Koblentz에 대한 크레딧) display: block대신 사용하도록 업데이트되었습니다 display: table.

---

http://html5boilerplate.com/ 에서 가져온 다음을 사용하는 것이 좋습니다 .

/* >> The Magnificent CLEARFIX << */

.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac \*/
.clearfix {  
  display: block;  
}

---

overflow 속성을 사용하여 추가 마크 업없이 부동 소수점을 지울 수 있습니다.

.container { overflow: hidden; }

이것은 IE6을 제외한 모든 브라우저에서 작동하며, 여기서해야 할 일은 hasLayout을 활성화하는 것뿐입니다 (zoom이 선호하는 방법입니다).

.container { zoom: 1; }

http://www.quirksmode.org/css/clearing.html

---

공식 CLEARFIX-Method에서 버그를 발견했습니다. DOT에는 글꼴 크기가 없습니다. 그리고 height = 0DOM 트리의 첫 번째 요소에 "clearfix"클래스가있는 경우 페이지 하단에 항상 12px의 여백이 있습니다. :)

다음과 같이 수정해야합니다.

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

이제 YAML-Layout의 일부입니다 ... 한 번보세요-매우 흥미 롭습니다! http://www.yaml.de/en/home.html

---

이것은 매우 깔끔한 솔루션입니다.

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

Firefox 3.5 이상, Safari 4 이상, Chrome, Opera 9 이상, IE 6 이상에서 작동하는 것으로 알려져 있습니다.

: before 선택기를 포함 할 필요는 없지만 최신 브라우저에서 상단 여백이 축소되는 것을 방지합니다. 이렇게하면 zoom : 1이 적용될 때 IE 6/7과 시각적 일관성이 있습니다.

에서 http://nicolasgallagher.com/micro-clearfix-hack/

---

부트 스트랩의 Clearfix :

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

---

나는 단지 :-

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

IE8 +와 가장 잘 작동하고 호환됩니다.

---

엄청난 양의 답변을 감안할 때 게시하지 않을 것입니다. 그러나이 방법은 나를 도왔 듯이 누군가에게 도움이 될 수 있습니다.

가능할 때마다 수레에서 벗어나십시오.

언급 할 가치가 있습니다. 나는 에볼라와 같은 수레를 피합니다. 많은 이유가 있고 나는 혼자가 아닙니다. clearfix가 무엇인지 에 대한 Rikudo 답변을 읽으면 내가 의미하는 바를 알 수 있습니다. 자신의 말로 :...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...

수레 외에 다른 좋은 (때로는 더 나은) 옵션이 있습니다. 기술이 발전하고 향상됨에 따라 flexbox (및 기타 방법)가 널리 채택 될 것이며 float는 불량 메모리가 될 것입니다. CSS4일까요?

---

플로트 오작동 및 실패한 지우기

우선, 때로는 생명의 은인이 뚫리고 HTML 흐름이 가라 앉기 시작할 때까지 부유물로부터 안전하다고 생각할 수 있습니다.

아래 의 코드 펜 http://codepen.io/omarjuvera/pen/jEXBya 에서 <div classs="clear"></div>(또는 다른 요소) 로 플로트를 지우는 관행 은 일반적이지만 눈살을 찌푸리고 반의 미적 입니다.

<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

div {
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

div.floated {
    float: left;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

그러나 , 당신의 플로트가 항해 할 가치가 있다고 생각했을 때 ... 붐! 화면 크기가 점점 작아짐에 따라 아래 그래픽과 같은 이상한 동작을 볼 수 있습니다 (동일 http://codepen.io/omarjuvera/pen/jEXBya ).

왜 관심을 가져야합니까? 정확한 수치는 확실하지 않지만 사용되는 장치의 약 80 % (또는 그 이상)가 화면이 작은 모바일 장치입니다. 데스크탑 컴퓨터 / 노트북은 더 이상 왕이 아닙니다.

---

거기서 끝나지 않습니다

이것은 수레의 유일한 문제가 아닙니다. 많은 것이 있지만이 예에서 일부는 all you have to do is to place your floats in a container. 그러나 코드 펜 과 그래픽 에서 볼 수 있듯이 그렇지 않습니다. 그것은 분명히 상황을 최악으로 만들었다.

HTML

<div id="container" class="">
  <div class="floated">1st</div>
  <div class="floated">2nd</div>
  <div class="floated">3nd</div>
</div> <!-- /#conteiner -->
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

#container {
  min-height: 100px; /* To prevent it from collapsing */
  border: 1px solid #0f0;
}
.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

결과는?

그것은 동일합니다!

아시다시피 CSS 파티를 시작하여 모든 종류의 선택기와 속성을 파티에 초대합니다. 처음 시작한 것보다 CSS를 더 엉망으로 만듭니다. 플로트를 고치기 위해서.

---

구조에 CSS Clearfix

이 간단하고 적응력이 뛰어난 CSS는 아름다움이자 "구세주"입니다.

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

그게 다야! 의미론을 깨지 않고 실제로 작동 하며 작동한다고 언급 했 습니까? :

동일한 샘플에서 ... HTML

<div class="clearfix">
    <div class="floated">1st</div>
    <div class="floated">2nd</div>
    <div class="floated">3nd</div>
</div>
<section>Below</section>

CSS

div.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}
section {
        border: 4px solid #00f;
}


.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

---

이제 우리는 더 이상 <div classs="clear"></div> <!-- Acts as a wall -->의미 경찰을 필요로하지 않고 행복하게 유지합니다. 이것이 유일한 이점은 아닙니다. 이 clearfix는 @media가장 간단한 형식을 사용하지 않고도 모든 화면 크기에 반응합니다 . 즉, 플로트 컨테이너를 점검하고 침수를 방지합니다. 마지막으로, 하나의 작은 가라테 찹 =)에서 모든 오래된 브라우저를 지원합니다.

다시 clearfix입니다

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

---

나는 항상 그리드의 주요 섹션을 플로팅 clear: both;하고 바닥 글에 적용 합니다. 추가 div 또는 클래스가 필요하지 않습니다.

---

솔직히 모든 솔루션은 렌더링 버그를 수정하는 해킹 인 것 같습니다 ... 내가 틀렸습니까?

나는 <br clear="all" />가장 쉽고 간단 하다는 것을 알았 습니다. class="clearfix"모든 곳을 보는 것은 외부 마크 업 요소에 반대하는 사람의 감성을 발휘할 수 없습니다. 다른 캔버스에 문제를 그리는 것입니다.

나는 또한 display: hidden솔루션 을 사용하는데 , 이것은 추가 클래스 선언이나 html 마크 업이 필요하지 않습니다.하지만 때로는 컨테이너를 오버플로하는 요소가 필요합니다. 예쁜 리본과 새시

---

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

---

이 모든 솔루션을 시도했지만 <html>아래 코드를 사용하면 자동으로 요소에 큰 여백이 추가 됩니다.

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

마지막으로 font-size: 0;위의 CSS를 추가하여 여백 문제를 해결했습니다 .

---

SASS에서 clearfix는 다음과 같습니다.

@mixin clearfix {
    &:before, &:after {
        content: '';
        display: table;
    }
    &:after {
        clear: both;
    }
    *zoom: 1;
}

다음과 같이 사용됩니다.

.container {
    @include clearfix;
}

새로운 clearfix를 원한다면 :

@mixin newclearfix {
    &:after {
        content:"";
        display:table;
        clear:both;
    }
}

---

LESS ( http://lesscss.org/ )를 사용하면 편리한 clearfix 도우미를 만들 수 있습니다.

.clearfix() {
  zoom: 1;
  &:before { 
    content: ''; 
    display: block; 
  }
  &:after { 
    content: ''; 
    display: table; 
    clear: both; 
  }
}

그런 다음 문제가있는 컨테이너와 함께 사용합니다. 예 :

<!-- HTML -->
<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

/* LESS */
div#container {
  .clearfix();
}

---

플로팅 컨테이너에 부모 요소가있는 경우 ie6에 overflow:hidden/ auto및 높이를 사용 하면 충분합니다.

#test 중 하나가 작동 할 수 있습니다. 아래에 설명 된 HTML이 부동 소수점을 제거합니다.

#test {
  overflow:hidden; // or auto;
  _height:1%; forces hasLayout in IE6
}

<div id="test">
  <div style="floatLeft"></div>
  <div style="random"></div>
</div>

이것이 ie6에서 작동하지 않는 경우 부모를 플로팅하여 플로트를 지우십시오.

#test {
  float: left; // using float to clear float
  width: 99%;
}

다른 종류의 청산이 아직 필요하지 않았습니다. HTML을 작성하는 방식 일 수도 있습니다.

---

나는 #content두 열이 모두 부동을 포함하는 방식으로 부동합니다. 또한 #content사이드 바를 지우지 않고도 내부 요소를 지울 수 있기 때문입니다 .

래퍼와 마찬가지로 두 개의 열을 래핑하려면 블록 서식 컨텍스트로 만들어야합니다.

이 문서에서는 사용할 수있는 몇 가지 트리거 인 블록 서식 컨텍스트에 대해 설명합니다 .

---

clearfix는 추가 마크 업을 추가 할 필요가 없도록 요소가 자동으로 삭제되는 방법입니다.

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

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

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

clearfix를 사용하면

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

---

새로운 표시 값이 작업에 한 줄로 표시됩니다.

display: flow-root;

w3 사양에서 : "요소는 블록 컨테이너 상자를 생성하고 흐름 레이아웃을 사용하여 내용을 레이아웃합니다. 항상 해당 내용에 대한 새 블록 형식화 컨텍스트를 설정합니다."

정보 : https://www.w3.org/TR/css-display-3/#valdef-display-flow-root https://www.chromestatus.com/feature/5769454877147136

※ 위 링크에서 볼 수 있듯이 현재 지원이 제한되어 있으므로 아래와 같은 폴백 지원을 이용하실 수 있습니다 : https://github.com/fliptheweb/postcss-flow-root

---

CSS 해킹을 사용하여 한 줄의 HTML이 작업을 수행하는 이유. 그리고 의미 체계 html tu put break를 사용하여 줄로 돌아 가지 않는 이유는 무엇입니까?

나를 위해 사용하는 것이 정말 좋습니다.

<br style="clear:both" />

그리고 html에서 어떤 스타일도 원하지 않는다면 휴식 시간에 클래스를 사용하고 .clear { clear:both; }CSS에 넣어야 합니다.

이것의 장점 :

• 라인으로 돌아 가기 위해 html의 의미 론적 사용
• CSS로드가 없으면 작동합니다.
• 추가 CSS 코드 및 해킹이 필요하지 않습니다.
• CSS로 br을 시뮬레이션 할 필요가 없습니다. 이미 HTML에 존재합니다.

---

이 HTML 구조를 사용한다고 가정합니다.

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

내가 사용할 CSS는 다음과 같습니다.

div#container {
    overflow: hidden;    /* makes element contain floated child elements */
}

div#content, div#sidebar {
    float: left;
    display: inline;    /* preemptively fixes IE6 dobule-margin bug */
}

이 세트를 항상 사용하고 IE6에서도 잘 작동합니다.

---

나는 항상 micro-clearfix를 사용합니다 .

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

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 */
.cf {
    *zoom: 1;
}

Cascade Framework 에서는 기본적으로 블록 수준 요소에도 적용합니다. IMO는 기본적으로 블록 레벨 요소에 적용하면 블록 레벨 요소가 전통적인 동작보다 더 직관적 인 동작을 제공합니다. 또한 이전 브라우저에 대한 지원을 Cascade Framework (IE6-8 및 최신 브라우저를 지원함)에 추가하는 것이 훨씬 쉬워졌습니다.

---

다른 clearfix와 달리 컨테이너가없는 개방형입니다.

다른 clearfix는 플로팅 된 요소가 잘 표시된 컨테이너에 있어야하거나 의미 상 비어있는 추가가 필요합니다 <div>. 반대로 콘텐츠와 마크 업을 명확하게 분리하려면 이 문제에 대한 엄격한 CSS 솔루션 이 필요 합니다 .

float의 끝을 표시해야한다는 단순한 사실은 무인 CSS 조판을 허용하지 않습니다 .

후자가 목표 인 경우 "clearfix"가 발생할 때까지 플로트를 열어 두어야합니다 (단락, 순서 및 순서없는 목록 등). 예를 들어, clearfix는 새 제목으로 설정 될 수 있습니다.

이것이 새로운 제목에 다음 clearfix를 사용하는 이유입니다.

h1 {
    clear: both;
    display: inline-block;
    width: 100%;
}

이 솔루션은 내 웹 사이트 에서 문제를 해결하기 위해 광범위하게 사용 됩니다. 플로팅 미니어처 옆의 텍스트가 짧고 다음 지우기 개체의 위쪽 여백이 존중되지 않습니다.

또한 사이트에서 PDF 를 자동으로 생성 할 때 수동 개입을 방지합니다 . 다음은 예제 페이지 입니다.

---

이것을 CSS에 넣을 수도 있습니다.

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

*:first-child+html .cb{zoom: 1} /* for IE7 */

그리고 상위 div에 클래스 "cb"를 추가합니다.

<div id="container" class="cb">

원래 코드에 다른 것을 추가 할 필요가 없습니다.

---

#content{float:left;}
#sidebar{float:left;}
.clear{clear:both; display:block; height:0px; width:0px; overflow:hidden;}

<div id="container">
  <div id="content">text 1 </div>
  <div id="sidebar">text 2</div>
  <div class="clear"></div>
</div>

---

이것을 시도해 보셨습니까?

<div style="clear:both;"/>

이 방법에 문제가 없었습니다.

---

My Favorite Method는 내 CSS / SCSS 문서에 아래와 같이 clearfix 클래스를 생성하는 것입니다.

.clearfix{
    clear:both
}

그런 다음 아래 표시된 것처럼 내 html 문서에서 호출하십시오.

<html>
  <div class="div-number-one">
    Some Content before the clearfix
  </div>

  <!-- Let's say we need to clearfix Here between these two divs --->
  <div class="clearfix"></div>

  <div class="div-number-two">
    Some more content after the clearfix
  </div>
</html>

---

div 요소 내에서 float 속성을 사용할 때 문제를 해결하는 것은 매우 간단합니다. div 요소 하나를 float : left; 다른 하나는 float : right; 두 div 요소의 부모에 대해 clearfix를 사용할 수 있습니다. clearfix 사용을 거부 할 경우 불필요한 공간을 아래 내용으로 채우면 사이트 구조가 깨집니다.

참고 URL : https://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use