CSS 사양에 따르면 부동 소수점은 문서 흐름 밖으로 이동되며 블록 상자의 레이아웃에는 영향을 주지 않고 인라인 상자(일반적으로 텍스트)의 배열에만 영향을 미칩니다. 따라서 높이가 포함된 컨테이너를 초과하면 일반 상위 컨테이너는 부동 요소를 닫기 위해 자동으로 늘어나지 않습니다. 하지만 때로는 자동 종료 동작이 필요할 때도 있습니다. 어떻게 처리해야 할까요?
이를 수행하는 한 가지 방법은 상위 컨테이너에 추가 레이블을 삽입하고 상위 컨테이너를 명확하게 확장하는 것입니다. 이 방법은 브라우저 호환성이 좋고 문제가 없습니다. 단점은 추가(일반적으로 의미상 의미가 없는) 태그가 필요하므로 개인적으로 마음에 들지 않습니다.
나중에 :after 의사 클래스를 사용하여 부동 소수점을 지우는 요소를 동적으로 포함하는 새로운 방법이 있었습니다. 이 방법은 추가 콘텐츠가 CSS로 생성된다는 점을 제외하면 이전 방법과 동일하지만 IE는 그렇지 않았습니다. support :after 그리고 많은 해킹을 해야 했습니다. 이 방법은 일반적인 호환성을 가지고 있지만 다양한 해킹을 통해 다양한 브라우저를 처리할 수 있는 동시에 html이 비교적 깔끔한지 확인할 수 있으므로 여전히 더 자주 사용됩니다.
나중에 누군가가 상위 컨테이너의 오버플로를 visible 이외의 값으로 설정하면 표준 호환 브라우저에서 부동 요소를 닫을 수 있다는 사실을 발견했습니다. 당연히 IE는 이를 지원하지 않으므로 이 방법은 이전 방법만큼 유효합니다. 다른 처리를 수행합니다(특히 레이아웃 트리거). 차이점은 오버플로가 :after 의사 클래스만큼 문제가 되지 않는다는 것입니다. 또한 오버플로는 약간의 충돌을 일으킬 수 있습니다.
오버플로를 사용하기 전에는 상위 컨테이너를 부동으로 만드는 또 다른 부동 소수점 사용 방법이 있었습니다. 이는 부동 요소의 특성을 활용합니다. 부동 요소는 부동 요소를 닫습니다. 이 방법은 IE/Win 및 표준 호환 브라우저에서 좋은 결과를 가져오지만 단점도 분명합니다. 즉, 부동을 원하기 때문에 상위 컨테이너가 부동하지 않을 수 있습니다. 결국 부동은 특별한 동작이며 때로는 레이아웃이 그렇지 않습니다. 맞습니다. 뜨도록 허용하는 것도 정상입니다. IE 및 표준 호환 브라우저에서는 float 요소를 닫을 수 있지만 IE/Win에서는 float가 레이아웃을 트리거하므로 표준 호환 브라우저에서 float는 실제로 이전 요소와 동일합니다. 이 메서드의 오버플로 원칙은 동일하며 "블록 수준 서식 범위"가 발생합니다. 이는 CSS 사양에서 언급된 현상으로, 종종 그 특징 중 하나는 내부 부동 소수점을 자동으로 닫는다는 것입니다. . 요소.
사양에 따라 다음 유형의 요소는 블록 수준 서식 범위를 생성합니다.
● 플로팅 요소는 왼쪽이나 오른쪽일 수 있습니다.
● 절대적으로 배치된 요소.
● 인라인 블록 요소이지만 이 도마뱀은 현재 이를 지원하지 않습니다.
● 실제로 table-cell 유형 요소는 inline-table(gecko에서는 지원되지 않음)뿐만 아니라 table, table-head-group, table-row 등도 허용됩니다. 모두 간접적으로 익명 테이블을 생성하기 때문입니다. 셀.
● Overflow는 값이 보이지 않는 요소이다.
따라서 표준을 준수하는 브라우저에서는 부동 요소를 닫는 방법이 너무 많아서 CSS만 필요하고 다른 것은 필요하지 않다는 것이 밝혀졌습니다. 그런데 위의 내용은 오버플로 외에도 상위 컨테이너의 너비를 자동으로 축소하는 추가 효과를 갖습니다.
IE/Win에는 레이아웃이 있는 요소가 자동으로 부동 요소를 닫는 자체 시스템이 있습니다. 레이아웃을 트리거하는 CSS 속성을 살펴보겠습니다. 블록 수준 서식과 많은 유사점이 있습니다. 위의 범위:
● 부동 요소 ● 절대 위치 요소 ● 디스플레이:인라인 블록
● 줌
● 너비/높이
● Overflow/overflow-x/overflow-y [IE7의 새로운 기능]
● 최대/최소 너비/높이 [IE7의 새로운 기능]
위에서부터 IE에서 부동 요소를 닫는 방법에는 여러 가지가 있으며 당연히 모두 제한 사항이 있습니다. 부작용이 있거나 비표준 속성(검증을 통과할 수 없음)을 사용합니다.
또 다른 언급할 사항은 display:inline-block입니다. 이 속성 자체는 IE에 아무런 도움이 되지 않습니다. 그러나 표준을 준수하는 브라우저는 이 속성을 인식하므로 이에 영향을 미치지 않습니다. 브라우저의 경우 디스플레이를 기본값으로 다시 설정해야 합니다. 여기에는 IE에 버그가 있습니다. 먼저 display:inline-block을 정의한 다음 디스플레이를 다시 블록으로 설정하면(이 두 디스플레이는 효과를 내기 위해 두 개의 CSS 문에 차례로 배치되어야 합니다) 레이아웃은 다음과 같습니다. 사라지지 않으며 동시에 레이아웃도 사라지지 않습니다. 이는 다른 브라우저에 영향을 주지 않으므로 현재로서는 이 방법도 레이아웃을 실행하는 좋은 방법입니다.
| .gainlayout{display:inline-block;} .gainlayout{디스플레이:블록;} |
따라서 브라우저 간에 부동 요소를 닫는 방법에는 여러 가지가 있습니다. 이러한 CSS 속성을 함께 사용하는 방법에는 특정 상황에 대한 자세한 분석이 필요하며 실제로 작동하지 않는 경우 조건부 주석을 유연하게 적용할 수도 있습니다. 뒤로가서 클리어해서 사용하시면 됩니다.