html - 영어 - 떠 다니는 요소의 부모를 어떻게 붕괴시키지 않으십니까?




줄 바꿈 영어 로 (11)

이 질문에는 이미 답변이 있습니다.

<div> 와 같은 요소가 일반적으로 내용에 맞게 커지지 만 float 속성을 사용하면 CSS 초보자에게 깜짝 놀랄만 한 문제가 발생할 수 있습니다. float 요소가 아닌 요소가 있으면 부모 요소가 접힙니다.

예 :

  <div>
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>
    </div>

이 예제의 부모 div는 float 하위를 포함하도록 확장되지 않습니다 . height: 0 것처럼 보입니다.

이 문제를 어떻게 해결합니까?

나는 여기에 해결책의 철저한 목록을 만들고 싶다. 브라우저 간 호환성 문제가 있다는 점을 알고 계시면 해당 문제를 지적하십시오.

해결책 1

부모를 부양하십시오.

  <div style="float: left;">
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>
    </div>

장점 : 의미 론적 코드.
단점 : 항상 부모를 떠 다니는 것은 아니다. 부모님의 부모님을 돌보는가? 모든 조상 요소를 부유시켜야합니까?

해결책 2

부모에게 명시적인 높이를줍니다.

    <div style="height: 300px;">
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>        
    </div>

장점 : 의미 론적 코드.
단점 : 융통성 없음 - 내용이 변경되거나 브라우저의 크기가 조정되면 레이아웃이 중단됩니다.

해결책 3

다음과 같이 부모 요소 안에 "spacer"요소를 추가하십시오.

    <div>
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>
        <div class="spacer" style="clear: both;"></div>
    </div>

장점 : 코드 작성이 간단 합니다.
단점 : 의미가 없습니다. spacer div는 레이아웃 해킹으로 만 존재합니다.

해결책 4

부모를 overflow: auto 설정하십시오.

   <div style="overflow: auto;">
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>        
    </div>

장점 : 여분의 div 필요하지 않습니다.
단점 : 해킹처럼 보입니다. 이는 overflow 속성의 명시된 목적이 아닙니다.

코멘트? 다른 제안?


해결책 1 :

가장 신뢰할 수 있고 눈에 거슬리는 방법은 다음과 같습니다.

데모 : http://jsfiddle.net/SO_AMK/wXaEH/

HTML :

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>​

CSS :

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

약간의 CSS 타겟팅으로 부모 DIV 클래스를 추가 할 필요조차 없습니다.

이 솔루션은 이전 버전의 IE8과 호환되므로 이전 버전의 브라우저에 대해 걱정할 필요가 없습니다.

해결책 2 :

솔루션 1에 대한 적응이 제안되었으며 다음과 같습니다.

데모 : http://jsfiddle.net/wXaEH/162/

HTML :

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>​

CSS :

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
   *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}

.ie7-clear {
    display: block;
    clear: both;
}

이 솔루션은 IE5.5와 역 호환이 가능하지만 테스트되지 않았습니다.

해결책 3 :

display: inline-block; 을 설정할 수도 있습니다 display: inline-block;width: 100%; 붕괴하지 않는 동안 정상적인 블록 요소를 에뮬레이션합니다.

데모 : http://jsfiddle.net/SO_AMK/ae5ey/

CSS :

.clearfix {
    display: inline-block;
    width: 100%;
}

이 솔루션은 IE5.5와 역 호환이 가능하지만 IE6에서만 테스트되었습니다.


가장 잘 알려진 솔루션 중 하나는 비 의미 론적 HTML 요소 대신 의사 요소를 사용하는 솔루션 번호 3의 변형입니다.

그것은 이렇게됩니다 ...

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

그것을 스타일 시트에 넣고, 필요한 것은 부동 소수점을 포함하는 요소에 'cf'클래스를 추가하는 것입니다.

제가 사용하는 것은 Nicolas Gallagher의 또 다른 변형입니다.

똑같은 일을하지만, 짧고, 깔끔하게 보이며, 꽤 유용한 또 다른 것을 성취하는 데 사용될 수 있습니다 - 부모와의 붕괴를 막기 위해 자식 요소의 여백을 방지합니다. (그러나 당신은 다른 것을 필요로합니다. 여기 http://nicolasgallagher.com/micro-clearfix-hack/ ).

.cf:after {
    content: " ";
    display: table;
    clear: float;
}

나는 최선의 방법은 다음 요소에 대해 clear:both 것이라고 믿는다.

이유는 다음과 같습니다.

1) :after selector는 IE6 / 7에서는 지원되지 않지만 FF3에서는 버그가 있지만,
IE8 +와 FF3.5 +에 대해서만 관심이 있다면 : after는 아마 당신에게 가장 좋습니다 ...

2) overflow 가 다른 일을해야하기 때문에이 해킹이 충분히 신뢰할 수 없습니다.

작성자 참고 사항 : 지우기에 아무런 해킹이 없습니다. 지우기 란 떠 다니는 필드를 건너 뛰는 것을 의미합니다. CLEAR는 HTML3 (누가 더 오래, 아시겠습니까?) http://www.w3.org/MarkUp/html3/deflists.html 이후로 우리와 함께합니다. 아마 페이지와 같이 조금 다른 이름을 선택해야 할 것입니다 : ...


내가 가장 좋아하는 방법은 부모 요소에 clearfix 클래스를 사용하는 것이다.

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

.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

오버플로를 auto 또는 hidden 으로 변경하면 주된 문제는 중간 마우스 버튼으로 모든 것을 스크롤 할 수있게되고 사용자가 전체 사이트 레이아웃을 엉망으로 만들 수 있다는 것입니다.


이 문제는 플로팅 된 요소가 컨테이너 상자 안에있을 때 해당 요소가 자동으로 컨테이너의 높이를 플로팅 요소로 조정하지 않을 때 발생합니다. 엘리먼트가 플로트 될 때 플로트가 플로우에서 제거되기 때문에 부모는 더 이상 엘리먼트를 포함하지 않습니다. 2 가지 방법으로 문제를 해결할 수 있습니다.

  • { clear: both; }
  • clearfix

어떤 일이 발생했는지 알았 으면 아래의 방법을 사용하여이를 "clearfix"하십시오.

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

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

데모 :)


이상한 사람은 아직까지 완전한 대답을 얻지 못했습니다. 아, 여기 있습니다.

해결책 1 : 맑음 : 둘 다

스타일이 clear 인 블록 요소 추가 : 둘 다; 그 위에 플로트를 지우고 그 요소의 부모가 붕괴하는 것을 막을 것입니다. http://jsfiddle.net/TVD2X/1/

장점 : 아래에 추가 한 요소 및 요소를 삭제할 수 있습니다. 위의 떠 다니는 요소 및 유효한 CSS에 의해 영향을받지 않습니다.

단점 : 다른 태그가 부표를 지우고, bloating 마크 업을 필요로합니다.

참고 : IE6로 돌아가서 금주 모임 (즉, 입력 요소)에서 작동하려면 : after를 사용할 수 없습니다.

해결 방법 2 : 표시 : 표

디스플레이 추가 : 표; 부유물을 부끄럽게 만들고 정확한 높이로 표시하도록 부모에게. http://jsfiddle.net/h9GAZ/1/

장점 : 추가 마크 업이없고 훨씬 깔끔합니다. IE6 +에서 작동합니다.

단점 : IE6 및 7에서 모든 것이 잘 작동하는지 확인하려면 유효하지 않은 CSS가 필요합니다.

참고 : IE6 및 7 너비 자동은 너비가 100 % + 패딩이되지 않도록하기 위해 사용되며 최신 브라우저에서는 그렇지 않습니다.

다른 "해결책"에 관한 쪽지

이 픽스는 지원되는 가장 낮은 브라우저 (IE6)에서 1 % 이상의 사용률로 작동합니다. 이는 다음을 사용함을 의미합니다.

오버플로 숨김은 내용을 표시하지만 요소가 접히는 것을 방지하지 않으므로 질문에 대답하지 않습니다. 인라인 블록을 사용하면 버그가있는 결과를 얻을 수 있으며, 이상한 여백을 가진 어린이는 테이블이 훨씬 좋습니다.

높이를 설정하면 붕괴를 방지하지만 적절한 수정이 아닙니다.

잘못된 CSS

잘못된 CSS는 아무도 다치게하지 않으며, 사실 지금은 표준입니다. 브라우저 접두사 사용은 브라우저 특정 해킹을 사용하는 것만큼이나 유효하며 최종 사용자에게 영향을 미치지 않습니다.

결론적으로

나는 위의 두 가지 방법을 모두 사용하여 요소가 올바르게 반응하고 서로 잘 작동하도록합니다. 동일한 작업을 수행 할 것을 당부합니다.


적용 할 수있는 곳에서 2와 4를 사용합니다 (예 : 콘텐츠의 높이를 알고 있거나 넘칠 경우 피해를주지 않을 때). 다른 곳에서는 솔루션 3을 사용합니다. 그런데 첫 번째 솔루션은 동일한 더미 요소를 사용하므로 더 이상 의미가 없으므로 첫 번째 솔루션은 3보다 이점이 없습니다.

그건 그렇고, 네 번째 해법이 해킹되는 것을 염려하지 않을 것입니다. CSS의 해킹은 기본 동작이 재 해석 또는 기타 변경의 영향을받는 경우에만 해로울 수 있습니다. 이렇게하면 해킹이 작동하지 않을 수 있습니다. 그러나이 경우 해킹은 overflow: auto 되는 정확한 동작에 의존합니다. 자유로운 타기를 걸 때 아무런 해가 없습니다.


주요 저자로 Nicolas GallagherThierry Koblentz 와 함께 여러 버전의 clearfix가 있습니다.

구형 브라우저를 지원하려면이 clearfix를 사용하는 것이 가장 좋습니다.

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

SCSS에서는 다음 기술을 사용해야합니다.

%clearfix {
  &:before, &:after {
    content:" ";
    display:table;
  }

  &:after {
    clear:both;
  }

  & {
    *zoom:1;
  }
}

#clearfixedelement {
    @extend %clearfix;
}

구형 브라우저에 대한 지원에 신경 쓰지 않는다면 더 짧은 버전이 있습니다.

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

코드가 완벽하게 의미 론적 이진 않지만 모든 컨테이너의 맨 아래에 플로트가있는 "지우기 div"라고하는 것이 더 간단하다고 생각합니다. 사실, 모든 프로젝트에 대해 다음과 같은 스타일 규칙을 리셋 블록에 포함 시켰습니다.

.clear 
{
   clear: both;
}

IE6 (GOD가 도움이된다)에서 스타일을 지정하는 경우이 규칙에 선 높이와 높이가 0px가되도록 할 수 있습니다.


overflow:auto 두기보다는 부모 overflow:auto 으로 overflow:hidden 두기 overflow:hidden

모든 웹 페이지에 대해 작성한 첫 번째 CSS는 항상 다음과 같습니다.

div {
  overflow:hidden;
}

그렇다면 걱정할 필요가 없습니다.







clearfix