>  기사  >  웹 프론트엔드  >  CSS 플로트 클리어 플로트 haslayout

CSS 플로트 클리어 플로트 haslayout

巴扎黑
巴扎黑원래의
2017-06-28 10:38:041627검색

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를 생성합니다.

,, ,

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:CSS--레이아웃다음 기사:CSS--레이아웃