CSS에서 부동 요소를 사용할 때 상위 컨테이너에 배경색이 표시되지 않는 이유는 무엇입니까?

CSS의 배경색 및 플로팅 요소

CSS로 작업할 때 플로팅 요소로 인해 상위 컨테이너가 표시되지 않는 상황이 발생할 수 있습니다. 배경색입니다. 이 문제는 플로팅 요소가 문서의 흐름에서 제거되어 상위 요소가 정의된 크기를 잃기 때문에 발생합니다.

예를 들어 다음 HTML 구조를 고려해보세요.

<div class="content">
    <div class="left">
        <p>some content</p>
    </div>
    <div class="right">
        <p>some content</p>
    </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가 수직으로 확장되지 않고 빨간색이 드러납니다. background.

이 문제를 해결하려면 상위 요소의 오버플로 속성을 사용할 수 있습니다. 오버플로를 숨김 또는 자동으로 설정하면 부모가 자식을 포함하게 되어 배경색이 올바르게 표시됩니다.

다음은 Overflow: Hidden:

.content {
    overflow:hidden;
}

을 사용하는 예입니다. 하위 요소를 포함하는 상위 요소의 경우 이제 플로팅 요소가 있는 경우에도 빨간색 배경이 표시됩니다.

위 내용은 CSS에서 부동 요소를 사용할 때 상위 컨테이너에 배경색이 표시되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!