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와 동일하게 고통 받고 있습니다.

현재 어떤 방법을 사용할 수 있습니까?

제작중인 디자인에 따라 아래의 각 수정 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 이 예제에서 floated 요소는 태그이지만 html 요소 일 수 있습니다.

클리어 픽스 재 장전

CSSMojo에 티에리 Koblentz 썼다 : 매우 최신 clearfix의 리로디드을 . 그는 oldIE에 대한 지원을 중단함으로써 하나의 CSS 문으로 솔루션을 단순화 할 수 있다고 언급했다. 또한 display: block(대신 display: table)를 사용하면 clearfix가있는 요소가 형제 인 경우 여백이 올바르게 축소됩니다.

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

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

⋮

⋮

구형 Clearfix 솔루션

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

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

그것들은 대략 시간순으로 나열됩니다.

최신 브라우저를위한 수정 프로그램 인 "Beat That ClearFix"

의 티에리 Koblentz ' CSS 모조은 최신 브라우저를 대상으로 할 때, 우리는 이제 떨어질 수 있다는 지적 zoom과 ::before특성 / 값을 간단하게 사용

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

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

Thierry는 또한 다음과 같은 기능을 제공합니다. " 주의 사항 : 새로운 프로젝트를 처음부터 시작하는 경우 계속 진행하십시오.하지만 기존 IE를 지원하지 않더라도이 기술을 현재의 기술과 바꾸지 마십시오. 무너지는 마진. "

마이크로 클리어 픽스

가장 최근에 그리고 세계적으로 채택 된 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속성 은 IE에서 hasLayout 을 트리거합니다 .

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

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

PIE : 손쉬운 청소 방법

이 오래된 "Easy Clearing"방법은 CSS가 더 까다로워 져 배치 된 요소가 컨테이너의 경계 외부에 매달리게하는 이점이 있습니다.

이 솔루션은 상당히 오래되었지만 위치에 관한 모든 정보를 쉽게 지울 수 있습니다. http://www.positioniseverything.net/easyclearing.html

"클리어"속성을 사용하는 요소

함께 무언가를 빠르게 때릴 때의 빠르고 더러운 솔루션 (약점 있음) :

<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 다른 요소.)

가장 강력한 솔루션

아마도 가장 일반적인 부동 소수점 적용은 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;
}

노트

clearfixes는 본질적으로 flexbox 레이아웃이 현재 훨씬 더 똑똑한 방식으로 . CSS 플로트는 원래 긴 텍스트 기사의 이미지와 같이 인라인 콘텐츠가 흐르도록 설계되었으며 그리드 레이아웃 등은 아닙니다. 귀하의 경우 대상 브라우저 인 flexbox를 지원 , 그것의 가치를 찾고.

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

이 clearfix는 2012 년 7 월 Thierry Koblentz 에 의해 발표되고 설명되었습니다 . 이는 Nicolas Gallagher의 2011 년 micro-clearfix 에서 불필요한 무게를 흘 렸습니다 . 이 과정에서 의사 요소를 자유롭게 사용할 수 있습니다. 이것은 (Terryerry 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 활성화 (확대 / 축소가 선호되는 방법) :

.container { zoom: 1; }

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

공식 CLEARFIX-Method : DOT에 글꼴 크기가없는 버그가 발견되었습니다. 그리고 height = 0DOM-Tree의 첫 번째 요소에 "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 {
  *zoom: 1;
}

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

.clearfix:after {
  clear: both;
}

나는 단지 :-

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

IE8 +와 가장 잘 호환됩니다 :)

답글이 너무 많으면 게시하지 않을 것입니다. 그러나이 방법은 나를 도울 때 누군가에게 도움이 될 수 있습니다.

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

언급 할 가치가 있습니다. 에볼라와 같은 수레를 피하십시오. 여러 가지 이유가 있으며 나는 혼자가 아닙니다. 명확한 것이 무엇인지 Rikudo의 답변을 읽으면 내가 무슨 뜻인지 알 수 있습니다. 자신의 말로 :...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...

수레 이외의 다른 좋은 (그리고 때로는 더 나은) 옵션이 있습니다. 기술이 발전하고 향상됨에 따라 flexbox (및 기타 방법)가 널리 채택되고 플로트는 단지 나쁜 메모리가 될 것입니다. 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:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

나는 항상 그리드의 메인 섹션을 띄우고 clear: both;바닥 글에 적용 합니다. 별도의 div 또는 클래스가 필요하지 않습니다.

솔직히; 모든 솔루션은 렌더링 버그를 해결하기위한 해킹 인 것 같습니다 ... 내가 틀렸습니까?

<br clear="all" />가장 쉽고 간단한 것으로 나타났습니다 . 보고 class="clearfix"는, 뇌졸중 사방 외부 markeup 요소에 객체를 사람의 감성을 할 수없는 이유는 무엇입니까? 다른 캔버스에 문제를 그리고 있습니다.

나는 또한 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의 경우 수정 사항은 다음과 같습니다.

@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및 높이를 사용 하면 충분합니다.

아래에 언급 된 HTML이 부동 소수점을 지우려면 #test 중 하나가 작동 할 수 있습니다.

#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을 쓰는 방식 일 것입니다.

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

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

나도 #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! -->

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

Fo 나를 사용하는 것이 더 좋습니다.

<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에서도 잘 작동합니다.

다른 클리어 픽스와 달리 여기에는 컨테이너가없는 개방형 엔드 포인트가 있습니다

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

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

후자가 당신의 목표라면, "clearfix"가 나올 때까지 모든 것을 (문단, 순서가 있고 순서가없는 목록 등) 감싸기 위해 float를 열어 두어야합니다. 예를 들어, 새 제목으로 일반 정보를 설정할 수 있습니다.

이것이 새로운 제목으로 다음과 같은 수정을 사용하는 이유입니다.

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

이 솔루션은 내 웹 사이트 에서 광범위하게 사용 되어 문제를 해결합니다. 플로팅 된 미니어처 옆에있는 텍스트가 짧고 다음 지우기 오브젝트의 상단 여백이 존중되지 않습니다.

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

나는 항상 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 및 최신 브라우저 지원)에 추가하기가 훨씬 쉬워졌습니다.

이것을 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">

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

이것을 시도 했습니까?

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

이 방법에는 아무런 문제가 없었습니다.

내가 가장 좋아하는 방법은 다음과 같이 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>

너무 간단한 clearfix는 div 요소 내에서 float 속성을 사용할 때 문제를 해결합니다. 두 개의 div 요소를 float : left; 그리고 다른 하나는 float : right; 두 div 요소의 부모에 clearfix를 사용할 수 있습니다. 우리가 clearfix를 사용하지 않으면 불필요한 공간이 아래 내용으로 채워지고 사이트 구조가 손상됩니다.