. content { 너비 : 960px; 높이 : 자동; 여백 : 0 Auto; 배경 : 빨간색; Clear : 둘 다; } .왼쪽 { 플로트 : 왼쪽; 높이 : 300px; 배경 : 녹색; } .오른쪽 { 플로트 : 오른쪽; 배경 : 노란색; }

문제는 '오른쪽'DIV의 내용이 확장 될 때 부모 '내용'DIV가 그에 따라 확장되지 않는다는 것입니다. 대신, 부모 div가 무너집니다. 이로 인해 빨간색 배경이 가려집니다.

이 문제를 해결하려면 요소가 떠질 때 발생하는 동작의 변화를 해결해야합니다. 설계에 의해, 그것들은 정상적인 문서 흐름에서 제거되며, 본질적으로 부모의 경계 외부에 위치됩니다. 결과적으로, 부모는 차원을 결정할 수단이 없어서 붕괴로 이어집니다.

솔루션은 부모에게 떠 다니는 어린이를 포함하도록 강요함으로써 부유 자녀를 설명하도록 지시하는 데 있습니다. 이는 부모 요소에 '오버플로'속성을 추가하여 달성 할 수 있습니다. '오버플로'에 대한 허용 값에는 '숨겨진'및 '자동'이 포함됩니다. 오버플로 : 숨겨진; // 또는 오버플로 : 자동; }

이 예제에서 '내용'DIV에 값을 적용하면 붕괴 문제가 해결되어 부모가 컨텐츠 크기에 따라 확장하여 전체 빨간색 배경을 노출시킬 수 있습니다. 오버플로 : 숨겨진; ... }

.content {
    width: 960px;
    height: auto;
    margin: 0 auto;
    background: red;
    clear: both;
}

.left {
    float: left;
    height: 300px;
    background: green;
}

.right {
    float: right;
    background: yellow;
}

이것은 부유 한 요소에도 불구하고 부모의 차원이 보존되어 문제를 효과적으로 해결합니다.