많은 사람들이 부동 요소를 닫는 문제를 연구했지만 해결 방법이 다르며 모든 방법이 완벽하지는 않습니다. 플로팅 요소 닫기(또는 플로트 지우기)는 웹 표준 디자인에서 자주 발생하는 문제이므로 여기서는 일반적으로 사용되는 몇 가지 방법을 요약하고 사용 편의성과 적용 환경을 비교해 보겠습니다. 더 좋은 방법이 있으면 토론에 올려주세요.

가장 간단한 경우는 다른 요소 콘텐츠와 함께 큰 div에 작은 고정 너비 div 요소(예: 탐색, 참조 등)를 포함하는 것입니다. 예를 들어 다음 코드는 다음과 같습니다.

"#inner"에 너비 값(예: 20%)을 설정할 수 있지만 div는 블록 수준 요소이므로 너비를 설정하더라도 그 뒤의 내용은 다음 줄에만 표시될 수 있습니다. give it 부동 속성을 설정합니다(왼쪽으로 부동 또는 오른쪽으로 부동). 그러면 위에서 언급한 문제가 이때 발생하게 됩니다.

"#inner"가 "#outer"보다 너비와 높이가 더 작은 경우에는 문제가 되지 않습니다.

그러나 "#inner"의 높이가 "#outer"의 높이를 초과하면 하단이 "#outer"의 하단을 초과하게 됩니다. 이는 "#inner"에 float 속성을 설정하면 텍스트 흐름에서 벗어나 너비와 높이가 어떻게 변경되더라도 "#outer"는 변경 사항을 따르지 않기 때문입니다.

해결 방법:

1) 추가 태그 방법

첫 번째 방법이자 W3C에서 권장하는 방법은 추가 태그를 사용하는 것입니다. 이 방법은 콘텐츠 끝에 빈 태그를 추가하는 것입니다. 일반적인 접근 방식은 다음과 같습니다.

또는 사용

이 메소드는 HTML 요소를 추가하여 외부 컨테이너를 강제로 확장합니다. 그러나 이 방법을 사용하면 태그가 추가되어 HTML 구조가 덜 간결해 보입니다.

참고: Internet Explorer(6 또는 7)에서
는 부동 요소를 지울 수 있지만 부동 요소를 닫을 수는 없다는 것을 알았습니다. Firefox에서는 이 문제가 발생하지 않습니다. ? !

after pseudo-class 및 content 선언을 사용하여 지정된 현재 콘텐츠 끝에 새 콘텐츠를 추가하려면

after pseudo-class를 사용합니다

일반적인 접근 방식은 더 작고 눈에 덜 띄기 때문에 "점"을 추가하는 것입니다. 그런 다음 이를 사용하여 부동 요소를 지우고(부동 요소 닫기) 내용을 숨깁니다.
#외부:이후{
콘텐츠:".";
높이:0;
가시성:숨김;
표시:블록;
지우기:둘 다;

이상한 점은 Windows의 Internet Explorer 6 이하에서는 CSS 2.1의 after pseudo-class를 지원하지 않지만, Mac의 Internet Explorer는 정상적으로 사용할 수 있기 때문에 Win/IE를 별도로 처리해야 한다는 점입니다. Win과 Mac에서 Internet Explorer를 구별하는 많은 방법 중에서 가장 일반적으로 사용되는 방법은 CSS 코드인 Holly 트릭입니다.
/* 이 코드는 IE/Win에서만 볼 수 있습니다*/
CSS 규칙
/*End Hack */

위 코드에는 두 줄의 주석이 있는데, 첫 번째 줄 끝에 백슬래시()가 나타나면 Mac의 Internet Explorer는 주석이 종료되지 않은 것으로 간주하므로 다음 줄까지 계속됩니다. 첫 번째 줄에는 완전한 "*/"가 나타나고 중간에 있는 모든 문자는 주석으로 간주되지만 IE/Win은 첫 번째와 세 번째 줄만 주석으로 간주하고 가운데는 유효한 코드입니다. 따라서 이는 다양한 플랫폼에서 IE를 구별합니다.

위의 원칙에 따라 Windows의 IE 6에서 부동 소수점을 정리하려면 다음 코드를 사용할 수 있습니다.

#외부 {
디스플레이:인라인 블록;
}
/* 홀리 해킹 시작 */
* HTML #외부 {
높이:1%;
}
#외부 {
표시:블록;
}
/* 해킹 종료 */

PS IE6/Mac 사용자를 고려하지 않는다면 * html #outer {height:1%;} 만 작성하시면 됩니다.
게다가 Internet Explorer 7에서는 display:inline-block이 잘 동작하지 않는 것 같습니다. 따라서 가장 완벽한 해킹 트릭을 사용하십시오.

3) 외부 요소를 띄웁니다. float-in-float

방법은 "#outer" 요소를 (왼쪽이나 오른쪽으로) 띄우는 매우 간단합니다.

그러나 이 방법으로 인해 발생하는 또 다른 문제는 "#outer"에 인접한 다음 요소가 "#outer"의 영향을 받아 그 위치가 변경된다는 점이므로 이 방법을 사용할 때는 주의해야 합니다. 페이지의 모든 요소를 ​​플로팅하고 마지막으로 적절한 의미 있는 요소(예: 바닥글)를 사용하여 플로트를 정리하는 옵션이 있습니다. 이는 불필요한 마크업을 줄이는 데 도움이 되지만 플로트가 너무 많으면 레이아웃이 어려워집니다.

4) 오버플로를 숨김 또는 자동으로 설정합니다.

"#outer" 속성의 오버플로 값을 숨김 또는 자동으로 설정하여 부동 소수점도 정리합니다

. 하지만 오버플로를 사용할 때는 브라우저 성능에 영향을 미치므로 주의하세요. 또한 Internet Explorer 6에서 단순히 오버플로를 숨김 또는 자동으로 설정하면 부동 요소를 효과적으로 지울 수 없습니다(부동 요소 닫기). 또한 "#outer" 치수, 즉 너비 또는 높이를 지정해야 합니다. :
#외부 {
오버플로:자동;
너비:100%;
}

참고: 이 방법을 사용하여 IE5/Mac에서 부동 요소를 지우려면(부동 요소 닫기) 오버플로 속성을 숨김으로 설정해야 합니다.

네 가지 방법 중 어떤 방법이 가장 좋은지

비교하고 선택하세요

우선, 다른 세 가지 방법에 비해 after 의사 클래스를 사용하는 것은 권장되지 않습니다. 위에서 언급한 홀리 트릭은 단지 IE/의 문제가 아닙니다. Win.Hover가 나타나면 다른 문제도 있을 것이므로 inline-block과 같은 속성을 추가했는데 이는 이 방법에 더 많은 불확실성이 있음을 의미합니다. 코드에 대해 "깨끗"하고 높은 기술력을 갖춘 사람들에게 권장됩니다.

그러면 실제로 다른 세 가지 방법을 고려할 수 있습니다. 그러나 오버플로를 사용하면 페이지 성능에 영향을 미칠 수 있으며 이러한 영향은 불확실합니다. 여러 브라우저에서 페이지를 테스트

하고 추가 태그를 사용하여 부동(부동 요소 닫기)을 지우는

W3C에 의해.
요소를 사용할지 아니면 빈