이해 부트 스트랩의 clearfix 클래스

.clearfix { 
    *zoom: 1; 
    &:before, 
    &:after { 
    display: table; 
    content: ""; 
    // Fixes Opera/contenteditable bug: 
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 
    line-height: 0; 
    } 
    &:after { 
    clear: both; 
    } 
}

은 왜 display:block를 사용할 수 있습니까?
또한 왜 가짜 균열도 ::before에도 적용됩니까?

출처

2013-02-20 Lanston

.clearfix은 less/mixins.less으로 정의됩니다.

이

A new micro clearfix hack

기사가 어떻게 모든 작품 설명 : 오른쪽의 정의 위의이 문서에 대한 링크와 주석입니다.

업데이트 : 예, 링크 전용 답변이 잘못되었습니다. 나는이 답변을 게시 할 때조차도 이것을 알고 있었지만 저작권, 표절 및 무엇 때문에 당신이 복사하고 붙여 넣기가 좋다고 생각하지 않았습니다. 그러나 나는 원래 기사에 링크되어 있기 때문에 지금은 괜찮다고 생각합니다. 그래도 필자의 이름을 언급해야한다 : Nicolas Gallagher.

이 "마이크로 clearfix는"의사 요소를 생성하고 자신의 displaytable에 설정합니다 다음은 기사의 고기 ("티에리의 방법은"Thierry Koblentz’s “clearfix reloaded” 언급되어 있습니다)입니다. 이렇게하면 :before 의사 요소 이 위쪽 여백 축소를 방지한다는 것을 의미하는 anonymous table-cell 및 의 새로운 블록 서식 지정 컨텍스트가 생성됩니다. :after 가상 요소는 수레를 지우는 데 사용됩니다. 결과적으로 생성 된 콘텐츠를 숨길 필요가 없으며 필요한 총 코드 수가 줄어 듭니다. :before 선택 포함

는 수레을 취소 할 필요하지이지만, 현대 브라우저에서 붕괴 상단 여백을 방지 할 수 있습니다. 이것은 두 가지 이점이

이는 예컨대 새로운 블록 포맷 콘텍스트를 생성 다른 플로트 격납 기술 시각적 일관성을 보장 overflow:hidden

zoom:1이 때 IE 6/7 시각적 일관성을 보장 적용된.

N.B. : IE 6/7에 새로운 블록 포맷팅 문맥 내에서 수레의 마진이 포함되지 않는 경우가 있습니다. 자세한 내용은 Better float containment in IE using CSS expressions에서 확인할 수 있습니다.

content:" "의 사용 (내용 문자열의 공간을 주) 피 contenteditable 속성이 어딘가에 HTML에서도있는 경우 clearfixed 요소의 주위에 공간을 만드는 Opera bug. 이 수정 프로그램을 발견 한 Sergio Cerrutti에게 감사드립니다. 또 다른 해결 방법은 을 사용하는 입니다.

기존 파이어 폭스

파이어 폭스 < 3.5 삽입 된 문자를 숨길 visibility:hidden의 추가로 티에리의 방법을 사용하여 도움이됩니다. 파이어 폭스의 기존 버전 여분의 공간이 새로운 블록을 만들 body 그 첫 번째 자식 요소 특정 상황에서 (예를 들어, jsfiddle.net/necolas/K538S/.)

대체 플로트 견제 방법 사이에 나타나는 피하기 위해 content:"." 필요하기 때문에이 입니다 overflow:hidden 또는 display:inline-block을 컨테이너 요소에 적용하는 것과 같은 서식 지정 컨텍스트를 사용하면 Firefox의 레거시 버전에서도이 동작을 피할 수 있습니다.

출처

2013-02-20 06:53:24

나는 링크 만 답변 나쁜 생각하지 않습니다. 당신이 찾고있는 대답이 들어있는 한. –

+25

문제는 링크가 다운 될 수 있다는 것입니다. 의견을 게시하고 소스가 더 이상 존재하지 않아 몇 개월/몇 년 후에 대답을 확인하려고한다면 어떻게해야합니까? –

:before 의사 요소 자체를 해킹 clearfix 필요하지 않습니다.

의 첫 번째 하위 요소 인 여백 붕괴를 방지하는 데 유용한 추가 기능입니다. 따라서 "clearfixed"요소의 하위 블록 요소의 위쪽 여백은 clearfixed 요소의 위쪽 테두리 아래에 위치하도록 보장됩니다.

display:table은 display:block이 트릭을 수행하지 않기 때문에 사용되고 있습니다. display:block 여백을 사용하면 :before 요소로도 축소됩니다.

주의 사항 : vertical-align:baseline이 clearfixed <div> 요소가있는 표 셀에 사용되는 경우 Firefox가 잘 정렬되지 않습니다. 그런 다음 반 붕괴 기능을 잃어 버리지 만 display:block을 사용하는 것이 더 좋을 수 있습니다. 추가 관심사의 경우에이 기사를 읽으십시오 : Clearfix interfering with vertical-align.

출처

2014-10-19 13:56:00

부모 컨테이너에서 clearfix를 사용하면 모든 하위 요소를 자동으로 줄 바꿈합니다.

일반적으로 부동 요소 뒤에 플로트 레이아웃을 지우는 데 사용됩니다.

플로트 레이아웃을 사용하면 하위 요소를 가로로 정렬합니다. Clearfix가이 동작을 해제합니다.

예 - 패널 부트 스트랩에서

, 클래스 패널이 사용되는 경우, 3 자녀 종류가 있습니다 부트 스트랩 : 패널 헤더 패널 바디 패널 - 바닥 글. 모두 display : block 레이아웃을 가지고 있지만 panel-body에는 clearfix가 미리 적용되어 있습니다. panel-body는 기본 컨테이너 유형이지만 panel-header & panel-footer는 컨테이너가 아니며 일부 기본 텍스트를 보유하기위한 것입니다.

플로팅 요소가 추가되면 플로팅 요소의 높이가 부모 컨테이너에 상속되지 않기 때문에 부모 컨테이너가 해당 요소를 감싸지 않습니다.

은 그래서 패널 헤더 & 패널 바닥 글, clearfix은 요소의 플로트 레이아웃을 취소 할 필요가 : Clearfix 클래스는 부모 컨테이너의 높이가 자식의 모든 요소를 수용하기 위해 증가 된 것을 시각적 모양을 제공합니다.

<div class="container"> 
    <div class="panel panel-default"> 
     <div class="panel-footer"> 
      <div class="col-xs-6"> 
       <input type="button" class="btn btn-primary" value="Button1"> 
       <input type="button" class="btn btn-primary" value="Button2"> 
       <input type="button" class="btn btn-primary" value="Button3"> 
      </div> 
     </div> 
    </div> 

    <div class="panel panel-default"> 
     <div class="panel-footer"> 
      <div class="col-xs-6"> 
       <input type="button" class="btn btn-primary" value="Button1"> 
       <input type="button" class="btn btn-primary" value="Button2"> 
       <input type="button" class="btn btn-primary" value="Button3"> 
      </div> 
      <div class="clearfix"/> 
     </div> 
    </div> 
</div>

출처

2017-05-02 15:19:14

이해 부트 스트랩의 clearfix 클래스

답변

기존 파이어 폭스

관련 문제