CSS 박스 붕괴 문제의 4 가지 해결 방안

일. 문제 재술##

네, 이것이 붕괴된 박스입니다. 외부 박스는 내부의 두 개의 플로트 박스를 감싸야 했지만, 결과적으로 그렇지 못했습니다.

이. 문제 발생 원인##

3 개의 박스는 모두 width 만 설정되었고 height 는 설정되지 않았습니다. 내부 두 박스는 각각 좌우 플로트를 설정했습니다. 레이아웃은 이렇게 간단하지만, 결과는 우리가 상상했던 것과 크게 다릅니다.

문제 발생 원인은 내부 두 박스가 float 속성을 가지고 있고, float 속성은 요소를 표준 문서 흐름에서 끌어낸다는 것입니다. 직접적인 결과로 외부 박스는 두 자식을 잃어버렸고, 내부에 다른 박스가 없기 때문에 외부 박스는 텍스트 노드 콘텐츠만 감싸고 두 개의 내부 박스는 밖에 내버려 두었습니다.

삼. 해결 방안##

1. 위에서 문제 발생 원인을 분석했습니다. 어렵지 않게 첫 번째 해결 방안을 찾을 수 있습니다 (자식이 없어졌다면, 찾으러 가면 됩니다)

——외부 박스에도 플로트 추가

외부 박스도 표준 문서 흐름에서 끌어내어 자식들과 만나게 합니다.

단점: 가독성이 나쁘고 유지보수가 어렵습니다 (다른 사람이 왜 부모 요소에 float 를 추가해야 하는지 이해하기 어렵습니다). 또한 페이지 전체 레이아웃을 조정해야 할 수도 있습니다

2. ——외부 박스 내 최하단에 clear 속성을 가진 빈 박스 추가

div 나 다른 블록 레벨 요소라도 상관없습니다. 가장 간단한 방법:
를 박스 내부 하단에 배치하는 것입니다

최하단의 빈 박스로 플로트를 클리어하여 박스를 다시 부풀립니다.

단점: 중복된 요소를 도입합니다

3. ——overflow:auto 로 플로트 클리어

외부 박스에 이 속성만 추가하면 됩니다

매우 간단합니다

단점: 보더나 마진을 적용할 때 스크롤바가 나타날 수 있어 외관에 영향을 줍니다

4. ——after 의사 요소로 플로트 클리어

외부 박스의 after 의사 요소에 clear 속성을 설정하고 숨깁니다

이것은 실제로 빈 박스 방안의 개선된 버전으로, 순수 CSS 해결 방안이며 중복된 요소를 도입할 필요가 없습니다. 이것은 책에서 권장하고 네트워크에서 제시하는 최적의 해결 방안이지만, 문제는 [IE7-] 이 after 의사 요소를 지원하지 않는다는 것입니다. 책에서는 [IE6-] 이 해킹:.wrapper{height:1%;} 과 함께 사용해야 한다고 했지만, 누가 맞는지 틀린지는 차치하고, [IE7-] 은 실제로 문제를 일으키지 않는 것 같습니다. 그림을 봅시다.

��. 테스트 결과##

(IE6/7 테스트 결과는 IETester 에서, IE8 과 FF 는 로컬 머신에서 나왔습니다. Chrome 결과는 FF 와 거의 동일하지만 Chrome 줌이 그다지 과학적이지 않아 스크린샷을 찍지 않았습니다. 흥미롭게도 스크린샷을 자세히 보면:IE6/7/8 표시 효과가 모두 다르다는 것을 알 수 있습니다...)

실험 소스 코드를 클릭하여 직접 테스트할 수 있습니다. 어떤 방법이 더 좋은지는 말하기 어렵지만, IETester 테스트 결과에서 볼 때, 동일한 코드라도 IE 에서 박스 붕괴 문제를 일으키지 않는 것 같습니다. IETester 가 틀리지 않았다면, IE 는 애초에 박스 붕괴 문제가 없는 것 같습니다.

하지만 몇 가지 선택 방안이 있는 것이 좋으며, 구체적인 상황에 따라 선택할 수 있습니다.

옆얘기###

실제로 가장 직접적인 방법도 있습니다: 각 박스에 width 와 height 를 설정하고, 필요한 만큼 크게 하면 됩니다. 하지만 이것은 해결 방안이라고 할 수 없습니다. 왜냐하면 이러한 레이아웃은 콘텐츠에 적응하지 않기 때문입니다. 하지만 페이지 콘텐츠가 거의 변경되지 않는다면 이것은 좋은 방안입니다. 왜냐하면 그 호환성은 의심의 여지가 없기 때문입니다.