부유 원소의 부모가 무너지지 않게 하려면 어떻게 해야 하나요?
다음과 같은 요소가 있지만<div>는 보통 .float속성으로 인해 CSS 신입사원들에게 놀라운 문제가 발생할 수 있습니다.플로팅 요소에 플로팅되지 않은 상위 요소가 있으면 상위 요소가 접힙니다.
예를 들어 다음과 같습니다.
<div>
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>이 예에서 부모 div는 플로팅된 자식 포함으로 확장되지 않습니다. - 다음과 같이 표시됩니다.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>장점: 코드로 직행합니다.
단점: 의미가 없습니다.스페이서 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; ★★★★★★★★★★★★★★★★★」width: 100%;일반 블록 요소를 에뮬레이트하면서 접히지 않도록 합니다.
데모: http://jsfiddle.net/SO_AMK/ae5ey/
CSS:
.clearfix {
display: inline-block;
width: 100%;
}
이 솔루션은 IE5.5와 하위 호환성이 있어야 하지만 IE6에서만 테스트되었습니다.
는 보통 ★★★★★★★★★★★★★★를 사용하고 있습니다.overflow: auto트릭: 엄밀히 말하면, 오버플로의 용도는 아니지만, 확실히 기억하기 쉽게 하기에는 충분한 관련성이 있습니다.의 의미float: left그가 다양한 . IMO »
rather rather rather overflow:auto붙이고, 모를 붙이고, 붙이고, on onoverflow:hidden
웹 페이지용으로 처음 쓰는 CSS는 항상 다음과 같습니다.
div {
overflow:hidden;
}
그럼 걱정 안 해도 되겠네요
이 문제는 부유 요소가 컨테이너 상자 안에 있을 때 발생합니다. 해당 요소는 자동으로 컨테이너 높이를 부유 요소에 맞게 조정하지 않습니다.플로우에서 플로트가 제거되기 때문에 요소가 플로우되면 해당 요소는 부모에 의해 더 이상 포함되지 않습니다.다음 두 가지 방법으로 수정할 수 있습니다.
{ clear: both; }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%;
}
니콜라스 갤러거와 티에리 코블렌츠를 주요 저자로 하는 클리어픽스에는 여러 가지 버전이 있습니다.
오래된 브라우저를 지원하려면 다음 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;
}
코드가 완전히 의미 있는 것은 아니지만, 모든 용기의 바닥에 플로트가 있는 "클리어 디바"를 두는 것이 더 간단하다고 생각합니다.실제로 모든 프로젝트의 리셋 블록에 다음 스타일 규칙을 포함시켰습니다.
.clear
{
clear: both;
}
IE6(god help you) 스타일링을 하는 경우 이 규칙에 0px 라인 높이와 높이도 지정할 수 있습니다.
이상적인 해결책은 다음과 같습니다.inline-block플로팅이 아닌 컬럼에 사용할 수 있습니다. 꽤 합니다.inline-block예: "인라인됩니다.span (b) (b) (b)-moz-inline-box파이어폭스용입니다.
특정 요소를 중첩할 때 문제가 많았기 때문에 FF2의 페이지도 확인해 주십시오(놀랍게도 이것은 FF보다 IE가 훨씬 성능이 좋은 경우입니다).
이상하게도 아직 아무도 이에 대한 완벽한 답을 내놓지 못했다. 아, 여기 있다.
솔루션 1: 클리어: 둘 다
clear:both; 스타일이 지정된 블록 요소를 추가하면 해당 점을 지나는 플로트가 지워지고 해당 요소의 상위 요소가 접히지 않습니다.http://jsfiddle.net/TVD2X/1/
장점: 요소를 클리어할 수 있습니다.아래에 추가한 요소는 위의 플로팅 요소와 유효한 css의 영향을 받지 않습니다.
단점: 플로트를 클리어하기 위해 다른 태그가 필요합니다.마크업이 부풀어오릅니다.
주의: IE6으로 돌아가 기권하는 부모(즉, 입력 요소)에게 기능하기 위해: after는 사용할 수 없습니다.
해결책 2: 디스플레이: 표
부모에 디스플레이:테이블을 추가하여 플로트를 떨어뜨리고 올바른 높이로 디스플레이합니다.http://jsfiddle.net/h9GAZ/1/
장점: 추가 가격 인상 없이 훨씬 깔끔합니다.IE6+로 동작
단점: IE6 및 7에서 모든 것이 정상적으로 동작하는지 확인하려면 비활성 CSS가 필요합니다.
주의: IE6 및 7 폭 자동은 폭이 100% 이상 패딩되는 것을 방지하기 위해 사용됩니다.이것은 새로운 브라우저에서는 해당되지 않습니다.
기타 '솔루션'에 대한 주의사항
이러한 수정은 지원되는 최저 브라우저(IE6)로 돌아갑니다.글로벌 사용률은 1%를 넘습니다.즉, : after를 사용해도 잘리지 않습니다.
오버플로우 숨김은 내용을 표시하지만 요소가 접히는 것을 방지하지 않으므로 질문에 대답하지 않습니다.인라인 블록을 사용하면 버그가 발생할 수 있고, 아이들이 여백이 이상해지는 등 테이블이 훨씬 좋습니다.
높이를 설정하면 접힘이 방지되지만 적절한 수정은 아닙니다.
유효하지 않은 css
병적인 css는 아무도 해치지 않습니다. 사실, 그것은 이제 표준입니다.브라우저 프레픽스를 사용하는 것은 브라우저 고유의 해크를 사용하는 것과 마찬가지로 무효이며 최종 사용자에게 영향을 주지 않습니다.
결론부터 말하면
저는 위의 두 가지 솔루션을 모두 사용하여 요소가 올바르게 반응하고 서로 잘 놀 수 있도록 하고 있습니다.여러분도 그렇게 해주시길 부탁드립니다.
해당되는 경우 2와 4를 사용합니다(콘텐츠의 높이를 알고 있거나 오버플로가 발생해도 해가 되지 않는 경우).다른 곳에서는 솔루션 3을 사용합니다.덧붙여서, 당신의 첫 번째 솔루션은 같은 더미 요소를 사용하기 때문에 의미가 없기 때문에 3개보다 유리하지 않습니다.
참고로 네 번째 해결책은 해킹이라고는 생각하지 않습니다.CSS의 해킹은 그들의 근본적인 행동이 재해석이나 다른 변화의 대상이 될 경우에만 해로울 것이다. 이 해킹은 ,, 이, 이, 이, 이, 이, ,, 이, ,, 이, 이, 이, 이, relies, 。overflow: auto무임승차하는 것은 나쁘지 않다.
가장 좋아하는 방법은 부모 요소에 clearfix 클래스를 사용하는 것입니다.
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
가장 잘 알려진 솔루션 중 하나는 솔루션 번호3의 변형으로 의미 없는 html 요소 대신 의사 요소를 사용합니다.
이런 식으로...
.cf:after {
content: " ";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
스타일시트에 배치하면 플로트를 포함하는 요소에 클래스 'cf'만 추가하면 됩니다.
내가 사용하는 것은 니콜라스 갤러거의 다른 변형이다.
그것은 같은 일을 하지만, 그것은 더 짧고, 더 깔끔해 보이며, 어쩌면 꽤 유용한 또 다른 일을 성취하는데 사용될지도 모른다. - 자녀 요소의 마진이 부모의 것과 함께 무너지는 것을 방지한다(그러나 그러기 위해서는 다른 무언가가 필요하다.- http://nicolasgallagher.com/micro-clearfix-hack/ 에서 더 많이 읽어보아라).
.cf:after {
content: " ";
display: table;
clear: float;
}
이것을 하단의 부모 div에 추가하다
<div style="clear:both"></div>
를 ""로 할 경우 할 수 auto ★★★★★★★★★★★★★★★★★」hidden중앙 마우스 엉덩이로 모든 것을 스크롤할 수 있고 사용자가 전체 사이트 레이아웃을 망칠 수 있습니다.
의미론적으로 더 옳다고 생각하는 다른 가능한 해결책은 플로팅된 내부 요소를 '표시: 인라인'으로 변경하는 것입니다.이 예시와 제가 이 페이지를 접했을 때 작업하고 있던 것은 둘 다 스팬이 사용되는 것과 거의 동일한 방식으로 플로팅된 div를 사용합니다.div를 사용하는 대신 스팬으로 전환하거나 기본적으로 'display: inline' 대신 'display: block'인 다른 요소를 사용하는 경우 이를 'display: inline'으로 변경합니다.저는 이것이 의미론적으로 100% 맞는 해결책이라고 생각합니다.
솔루션 1은 부모를 플로팅하는 것으로, 기본적으로 플로팅할 문서 전체를 변경하는 것입니다.
해결책 2는 명확한 높이를 설정하는 것으로, 상자를 그리면서 그림을 여기에 넣고 싶다고 말하는 것과 같습니다.즉, img 태그를 사용하는 경우 이것을 사용합니다.
솔루션 3은 클리어 플로트에 스페이서를 추가하는 것으로, 내용물 아래에 여분의 행을 추가하는 것과 같으며, 주변 요소에도 영향을 줍니다.이 방법을 사용하는 경우 div를 높이: 0px로 설정할 수 있습니다.
해결책 4: overflow: auto는 문서를 어떻게 배치해야 할지 모른다는 것을 인식하고 있으며, 무엇을 해야 할지 모른다는 것을 인정하고 있습니다.
나는 가장 좋은 방법은 세팅하는 것이라고 생각한다.clear:both다음 요소로 이동합니다.
이유는 다음과 같습니다.
1):after되지 않으며 되지 않습니다. IE6/7에서는 FF3에서는 지원되지 않습니다.
IE8+ FF3.5+: After: After.
2)overflow이치노
작성자 메모: 클리어에 대한 해킹은 없습니다.클리어란 부동필드를 건너뛰는 것을 의미합니다.CLEAR는 HTML3(아마도 더 오래) http://www.w3.org/MarkUp/html3/deflists.html부터 우리와 함께하고 있습니다.아마도 그들은 페이지와 같은 다른 이름을 선택해야 할 것입니다: new, 하지만 그것은 단지 세부 사항일 뿐입니다.
언급URL : https://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing
'programing' 카테고리의 다른 글
| PowerShell의 3진 연산자 (0) | 2023.04.08 |
|---|---|
| PowerShell 모듈이 장착되어 있는지 확인하는 방법 (0) | 2023.04.08 |
| div의 내용을 맨 아래에 정렬하는 방법 (0) | 2023.04.08 |
| Windows PowerShell: 명령 프롬프트 변경 (0) | 2023.04.08 |
| PSCustom Object에서 해시 테이블로 (0) | 2023.04.08 |