CSS 플로트 클리어 플로트 haslayout

1: float은 지정된 요소가 일반적인 문서 흐름에서 벗어날 수 있도록 하는 특수 레이아웃 기능입니다. 블록 수준 요소에 적용해야 합니다. 즉, 부동 소수점은 인라인 태그에 적용되지 않습니다. float가 적용되면 이 요소는 블록 수준 요소로 지정됩니다. 예를 들어 인라인 요소를 부동으로 설정한 후 해당 요소의 너비와 높이를 설정할 수 있습니다.

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

:after 의사 요소는 요소 뒤에 콘텐츠를 추가합니다. 이 의사 요소를 사용하면 생성자가 요소 콘텐츠 끝에 생성된 콘텐츠를 삽입할 수 있습니다. 기본적으로 이 의사 요소는 인라인 요소이지만 표시 속성을 사용하여 변경할 수 있습니다. after를 사용하여 생성된 콘텐츠는 첫 번째 표시: 블록이며, 레이아웃에 영향을 주지 않도록 높이를 0으로 설정합니다. 숨기기는 높이: 0과 비슷하므로 레이아웃에 영향을 주지 않습니다. clear: 둘 다 float를 지우는 것을 의미합니다. after를 지원하지 않는 브라우저 ie6과 ie7의 경우 height: 1%를 추가하면 됩니다. 이 경우 ie6과 ie7에는 haslayout이 있습니다.

2: haslayput

사실 haslayout은 Windows Internet Explorer 7 이하의 렌더링 엔진의 내부 구성 요소입니다.

Internet Explorer 7 이하에서는 요소가 크기와 구성을 계산합니다. 자체 콘텐츠의 크기를 계산하고 콘텐츠를 구성하기 위해 상위 요소를 사용합니다. 이러한 두 가지 서로 다른 개념을 조정하기 위해 렌더링 엔진은 true 또는 false일 수 있는 hasLayout 속성을 사용합니다. 요소의 hasLayout 속성 값이 true이면 요소에 레이아웃이 있다고 말합니다. 요소에 레이아웃이 있으면 자체 및 가능한 하위 요소의 크기와 위치를 지정하는 일을 담당합니다. 간단히 말해서 작업을 수행하기 위해 상위 요소에 의존하는 대신입니다. IE는 IE 개발자 도구 모음을 통해 볼 수 있습니다. 다음으로 HTML 요소에 haslayout이 있는지 여부에 관계없이 haslayout이 있는 요소는 일반적으로 "haslayout = -1"로 표시됩니다.

여기서 레이아웃은 상위 요소의 높이를 결정하기 위해 자체 및 가능한 하위 요소의 크기를 계산하고 배치하는 것입니다. 즉, 상위 요소는 내부 콘텐츠의 높이에 맞춰집니다. height: 1%가 추가됩니다. 물론 너비 등의 다른 속성을 추가하여 레이아웃을 만들 수도 있습니다. 물론 float를 추가할 수 있지만(float는 레이아웃을 트리거할 수도 있음) float를 삭제하기 위해 float를 사용하지 않는 것이 좋습니다. 그렇지 않으면 float가 float를 생성합니다.

,, , , , , <fieldset>, <legend> <span style="color:rgb(99,86,95); line-height:1.6em; font-family:Verdana,sans-serif; font-size:13px"><iframe>, <embed>, <object>, <applet></applet></object></embed></iframe></span><span style="color:rgb(99,86,95); line-height:1.6em; font-family:Verdana,sans-serif; font-size:13px"><marquee> ;</marquee></span><span style="color:rgb(99,86,95); line-height:1.6em; font-family:Verdana,sans-serif; font-size:13px"></span><span style="color:rgb(99,86,95); line-height:1.6em; font-family:Verdana,sans-serif; font-size:13px"></span><span style="color:rgb(99,86,95); line-height:1.6em; font-family:Verdana,sans-serif; font-size:13px">다음 CSS 속성 및 값을 사용하면 요소의 레이아웃을 얻을 수 있습니다. </span><ul style="margin:0px 0px 1.25em 40px; padding:0px; color:rgb(51,51,51); font-family:Verdana,sans-serif; font-size:13px; line-height:26px" class=" list-paddingleft-2"> <li><p>위치: 절대<br><a href="http://www.php.cn/code/6074.html" target="_blank">절대 위치에 있는 </a> 요소의 포함 블록에는 이러한 측면에서 종종 문제가 있습니다. </p></li> <li><p>float: left|right<br>레이아웃 요소의 특성으로 인해 플로팅 모델에는 이상한 동작이 많이 발생합니다. </p></li> <li><p>display: inline-block<br>인라인 수준 요소에 레이아웃이 필요할 때 자주 사용됩니다. 이는 요소에 레이아웃을 갖도록 하는 이 CSS 속성의 유일한 효과일 수도 있습니다. "인라인 블록 동작"은 IE에서 가능하지만 IE/Win: inline-block 및 hasLayout과 같이 매우 다릅니다. </p></li> <li><p>width: "auto"를 제외한 모든 값<br>많은 사람들이 레이아웃 관련 문제에 직면할 때 일반적으로 이를 사용하여 먼저 문제를 해결하려고 합니다. </p></li> <li><p>height: "auto"를 제외한 모든 값 <br>height: 1% Holly Hack에 사용됩니다. </p></li> <li><p>zoom: "일반" <br>IE 특정 속성을 제외한 모든 값. 그러나 Zoom: 1은 디버깅을 위해 일시적으로 사용될 수 있습니다. </p></li> <li><p><a href="http://www.php.cn/wiki/872.html" target="_blank">writing-mode</a>: tb-rl<br>MS 독점 속성입니다. </p></li> <li><p>overflow: Hidden|scroll|auto<br>IE7에서는 오버플로도 레이아웃 트리거가 되었습니다. 이전 버전의 IE에서는 이 속성에 레이아웃을 트리거하는 기능이 없었습니다. </p></li> <li><p>overflow-x|-y: Hidden|scroll|auto<br>overflow-x 및 Overflow-y는 아직 브라우저에서 널리 지원되지 않는 CSS3 상자 모델의 속성입니다. 이전 버전의 IE에서는 레이아웃을 트리거하는 기능이 없었습니다. </p></li> <li><p>또한 IE7 화면에 몇 가지 새로운 haslayout 액터가 추가되었습니다. hasLayout만 고려하면 최소/최대 및 너비/높이가 비슷하게 동작하며 위치 고정 및 절대값은 완전히 동일합니다. </p></li> <li><p>위치: 고정</p></li> <li><p>최소 너비: 모든 값<br>0으로 설정하더라도 요소가 레이아웃을 얻을 수 있습니다. </p></li> <li><p>max-width: "none"을 제외한 모든 값 </p></li> <li><p><a href="http://www.php.cn/wiki/909.html" target="_blank">min-height</a>: 모든 값 <br>0으로 설정해도 해당 요소의 haslayout=true가 가능</p></li> <li><p>max-height : "none"을 제외한 모든 값</p></li> </ul> <h3 id="인라인-레벨-요소-정보">인라인 레벨 요소 정보</h3> <p style="margin-top:0px; margin-bottom:0px; padding-top:5px; padding-bottom:5px; color:rgb(51,51,51); font-family:Verdana,sans-serif; font-size:13px; line-height:26px">인라인 요소의 경우(span 요소 또는 디스플레이: 인라인 요소와 같이 기본적으로 인라인일 수 있음)</p> <ul style="margin:0px 0px 1.25em 40px; padding:0px; color:rgb(51,51,51); font-family:Verdana,sans-serif; font-size:13px; line-height:26px" class=" list-paddingleft-2"> <li> <p>너비와 높이만 IE5에서 hasLayout을 트리거합니다. .x 및 IE6 이상의 쿼크 모드. IE6의 경우 브라우저가 표준 호환 모드에서 실행 중인 경우 인라인 요소는 너비 또는 높이 속성을 무시하므로 이 경우 너비 또는 높이를 설정하면 요소가 레이아웃을 갖도록 주문할 수 없습니다. </p> </li> <li><p>zoom은 항상 hasLayout을 실행할 수 있지만 IE5.0에서는 지원되지 않습니다. </p></li> </ul> <p style="margin-top:0px; margin-bottom:0px; padding-top:5px; padding-bottom:5px; color:rgb(51,51,51); font-family:Verdana,sans-serif; font-size:13px; line-height:26px">"레이아웃"이 있는 요소도 다음과 같이 표시되는 경우: 인라인, 해당 동작은 표준에 언급된 인라인 블록과 매우 유사합니다. 이 요소는 <a href="http://www.php.cn/wiki/869.html" target="_blank">vertical-align에 따라 일반 텍스트처럼 단락에서 수평으로 연속적으로 정렬됩니다. </a> 영향을 미치며, 내용에 따라 크기가 적응적으로 조정될 수 있습니다. 이는 또한 IE/Win에서만 인라인 요소가 문제가 적은 블록 수준 요소를 포함할 수 있는 이유를 설명할 수 있습니다. 왜냐하면 다른 브라우저에서 display: inline은 IE/Win과 달리 인라인을 의미하기 때문입니다. 인라인 요소에 레이아웃이 있으면 여전히 인라인을 의미합니다. 레이아웃이 인라인 블록이 됩니다. </p> <h3 id="Reset-hasLayout">Reset hasLayout</h3> <p style="margin-top:0px; margin-bottom:0px; padding-top:5px; padding-bottom:5px; color:rgb(51,51,51); font-family:Verdana,sans-serif; font-size:13px; line-height:26px">hasLayout에 다른 속성이 추가되지 않은 경우 다른 규칙에서 다음 속성을 기본값으로 재설정하면 hasLayout이 재설정(또는 실행 취소)됩니다. </p> <ul style="margin:0px 0px 1.25em 40px; padding:0px; color:rgb(51,51,51); font-family:Verdana,sans-serif; font-size:13px; line-height:26px" class=" list-paddingleft-2"> <li><p>width, height ("auto"로 설정) </p></li> <li><p>max-width, max-height ("none"으로 설정) (IE 7에서)</p></li> <li><p>position ("static"으로 설정)</p></li> <li> <p>float ("none"으로 설정)</p> </li> <li> <p>overflow ("visible"로 설정) (IE 7에서) </p> </li> <li><p>zoom ("normal"로 설정)</p></li> <li><p>writing-mode ("tb-rl"에서 "lr-t로 설정) </p></li> </ul> <p style="margin-top:0px; margin-bottom:0px; padding-top:5px; padding-bottom:5px; color:rgb(51,51,51); font-family:Verdana,sans-serif; font-size:13px; line-height:26px">표시 속성의 차이점: haslayout = true가 "inline-block"으로 설정된 경우 별도의 규칙에서도 이 속성을 재정의함 "block" 또는 "inline"으로 설정하면 haslayout 플래그가 false로 재설정되지 않습니다. </p> <p style="margin-top:0px; margin-bottom:0px; padding-top:5px; padding-bottom:5px; color:rgb(51,51,51); font-family:Verdana,sans-serif; font-size:13px; line-height:26px"> 중간 너비와 중간 높이를 기본값인 "0"으로 설정하면 여전히 hasLayout에 할당되지만 IE 7에서는 hasLayout </p>을 재설정하는 잘못된 속성 "auto".</legend> </fieldset>

위 내용은 CSS 플로트 클리어 플로트 haslayout의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!