플로팅된 하위 요소를 사용할 때 상위 Div의 배경이 무너지는 것을 방지하려면 어떻게 해야 합니까?

플로팅 요소 및 CSS 배경색

웹 개발에서 플로팅 요소와 관련된 시나리오를 접할 때 CSS로 요소를 스타일링하는 것은 어려울 수 있습니다. 이는 'float' 속성을 사용하여 문서의 일반적인 흐름에서 요소가 제거되어 상위 요소 크기 및 배경색에 문제가 발생할 때 발생할 수 있습니다.

'왼쪽' 두 개의 div가 있는 다음과 같은 단순화된 시나리오를 고려해보세요. 및 'right'는 상위 'content' 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;
}

발생하는 문제는 '오른쪽' div의 콘텐츠가 확장될 때 그에 따라 상위 '콘텐츠' div를 확장합니다. 대신 상위 div가 축소됩니다. 이로 인해 빨간색 배경이 가려집니다.

이 문제를 해결하려면 요소가 부동될 때 발생하는 동작 변화를 해결해야 합니다. 설계상 일반 문서 흐름에서 제거되어 본질적으로 상위 문서 경계 외부에 위치하게 됩니다. 결과적으로 부모는 크기를 결정할 수 없으며 붕괴로 이어집니다.

해결책은 부모에게 부동 자식을 포함하도록 강제하여 설명하도록 지시하는 것입니다. 이는 상위 요소에 'overflow' 속성을 추가하여 달성할 수 있습니다. 'overflow'에 허용되는 값에는 'hidden' 및 'auto'가 포함됩니다.

.content {
    overflow: hidden;  // or overflow: auto;
}

이 예에서 'content' div에 두 값 중 하나를 적용하면 축소 문제가 해결되어 상위 항목이 다음에 따라 확장될 수 있습니다. 콘텐츠 크기는 빨간색 배경 전체를 노출시킵니다.

.content {
    overflow: hidden;
    ...
}

이렇게 하면 플로팅 요소에도 불구하고 상위 요소의 크기가 유지되어 효과적으로 문제를 해결할 수 있습니다. 문제.

위 내용은 플로팅된 하위 요소를 사용할 때 상위 Div의 배경이 무너지는 것을 방지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!