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

부트 스트랩의 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;
  }
}

1. 왜 사용하지 display:block않습니까?
2. 또한 ::before의사 클래스 에도 적용되는 이유는 무엇입니까?

---

.clearfix에 정의되어 less/mixins.less있습니다. 정의 바로 위에이 기사에 대한 링크가있는 주석이 있습니다.

새로운 마이크로 클리어 픽스 해킹

이 기사는 모든 것이 어떻게 작동하는지 설명합니다.

업데이트 : 예, 링크 전용 답변은 나쁩니다. 이 답변을 올렸을 때도 알고 있었지만 저작권, 표절, 당신은 무엇을 가지고 있기 때문에 복사해서 붙여 넣기는 괜찮은 것 같지 않았습니다. 하지만 지금은 원본 기사를 링크했기 때문에 괜찮은 것 같습니다. 하지만 저자의 이름도 언급해야합니다. Nicolas Gallagher입니다. 다음은 기사의 핵심 입니다 ( "Thierry의 방법"은 Thierry Koblentz의 "clearfix reloaded"를 참조 함 ).

이“마이크로 클리어 픽스”는 의사 요소를 생성 display하고 table. 이것은 익명 테이블 셀 과 :before가상 요소가 상단 여백 붕괴를 방지 하는 새로운 블록 서식 컨텍스트를 생성합니다 . :after의사 요소는 수레를 취소하는 데 사용됩니다. 결과적으로 생성 된 콘텐츠를 숨길 필요가 없으며 필요한 총 코드 양이 줄어 듭니다.

:before선택기를 포함하는 것은 플로트를 지우는 데 필요 하지 않지만 최신 브라우저에서 상단 여백이 축소되는 것을 방지 합니다. 여기에는 두 가지 이점이 있습니다.

• 새로운 블록 형식화 컨텍스트를 생성하는 다른 float 억제 기술과 시각적 일관성을 보장합니다. overflow:hidden

• zoom:1적용 시 IE 6/7과 시각적 일관성을 보장합니다 .

주의 : IE 6/7이 새로운 블록 포맷 컨텍스트 내에서 플로트의 하단 여백을 포함하지 않는 상황이 있습니다. 자세한 내용은 여기에서 찾을 수 있습니다 . CSS 표현식을 사용하여 IE에서 더 나은 float 포함 .

의 사용 content:" "(내용 문자열의 공간을 유의)는 피할 오페라 버그 경우 공간을 만들어 주변 요소를 clearfixed contenteditable속성이 HTML에 존재하는 곳도있다. 이 수정 사항을 발견 한 Sergio Cerrutti에게 감사드립니다. 대체 수정 사항은 font:0/0 a.

레거시 Firefox

Firefox <3.5는 visibility:hidden삽입 된 문자를 숨기는 추가와 함께 Thierry의 방법을 사용하는 것이 좋습니다. 이는 Firefox의 레거시 버전이 특정 상황 (예 : jsfiddle.net/necolas/K538S/ ) 에서와 첫 번째 하위 요소 content:"."사이에 추가 공간이 표시되지 않도록 해야 하기 때문 입니다.body

컨테이너 요소에 적용 overflow:hidden또는 적용하는 것과 같이 새로운 블록 형식화 컨텍스트를 생성하는 대체 부동 포함 방법 display:inline-block도 Firefox의 레거시 버전에서이 동작을 방지합니다.

---

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

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

display:tabledisplay:block트릭을하지 않기 때문에 사용되고 있습니다. display:block여백을 사용 하면 :before요소 가 있어도 축소됩니다 .

한 가지주의 vertical-align:baseline할 점이 있습니다. <div>요소 가 명확하게 수정 된 표 셀에를 사용 하면 Firefox가 제대로 정렬되지 않습니다. 그러면 display:block축소 방지 기능이 없어도 사용하는 것을 선호 할 수 있습니다 . 더 많은 관심이 있으시면 이 기사를 읽으십시오 : 수직 정렬을 방해하는 Clearfix .

---

부모 컨테이너에서 clearfix를 사용하면 모든 자식 요소를 자동으로 래핑합니다.

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

부동 레이아웃을 사용하면 자식 요소를 가로로 정렬합니다. Clearfix는이 동작을 지 웁니다.

예-부트 스트랩 패널

부트 스트랩에서 클래스 패널을 사용할 때 패널 헤더, 패널 본문, 패널 바닥 글의 세 가지 하위 유형이 있습니다. 모두 display : block 레이아웃이 있지만 panel-body에는 clearfix가 미리 적용되어 있습니다. panel-body는 기본 컨테이너 유형 인 반면 panel-header 및 panel-footer는 컨테이너가 아닌 일부 기본 텍스트를 포함하기위한 것입니다.

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

So for panel-header & panel-footer, clearfix is needed to clear the float layout of elements: Clearfix class gives a visual appearance that the height of the parent container has been increased to accommodate all of its child elements.

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

참고URL : https://stackoverflow.com/questions/14973317/understanding-bootstraps-clearfix-class