부동 요소를 닫는 매우 간단한 방법_CSS/HTML

우연히 본 아주 좋은 팁입니다. CSS를 사용하여 닫힌 플로팅 요소를 처리하는 방법에 대한 것입니다.

플로팅 요소를 닫는 방법(플로트 지우기)은 아직 모릅니다. 이에 대한 자세한 내용은 old9의 블로그를 확인하세요. 플로팅 요소 닫기에 대한 기사가 있습니다.

이 방법 중 제가 가장 좋아하는 방법은 :after 가상 클래스를 사용하여 부동 요소를 지우는 요소를 동적으로 포함하는 것입니다. 안타깝게도 코드 양이 너무 많아 간결해 보이지 않습니다. 이제 아주 간단한 방법이 있다는 것을 알았습니다. 빠르게 소개하겠습니다. 원문은 http://annevankesteren.nl/2005/03/clearing-floats

에 있습니다. 주변 요소를 잘 확장할 수 없는 이유는 오버플로 때문입니다. . on, 오버플로가 표시되지 않기 때문입니다. W3C 설명 보기

인용 내용:

또한 요소에 아래쪽 여백 가장자리가 아래쪽 아래에 있는 부동 하위 항목이 있는 경우 해당 가장자리를 포함하도록 높이가 증가합니다. 요소 자체 또는 일반 흐름의 하위 항목인 부동 소수점만 사용됩니다. 예를 들어 절대 위치에 있는 하위 항목 내부의 부동 소수점은 그렇지 않습니다.

이제 주변 요소에 Overflow:auto를 추가하면 문제가 해결됩니다. IE를 제외하고는 실제로 가능합니다. 해결될 것입니다. IE의 문제는 다음에 해결될 것입니다. _height:1%;를 추가하면 문제가 완전히 해결됩니다.

다음은 비교를 위해 만든 세 가지 예입니다

1.닫힌 부동 요소 없음
2.IE가 아닌 경우 닫힌 부동 요소
3.완전 폐쇄형 요소

<p> </p> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>齑</title>