플로팅 요소를 사용할 때 CSS 배경이 콘텐츠를 숨기는 것을 방지하는 방법은 무엇입니까?

플로팅 요소가 있는 CSS 배경색

다음 HTML 코드를 고려하세요.

<div class="content">
  <div class="left">
     <p>some content</p>
  </div>
  <div class="right">
     <p>some content</p>
  </div>
</div>

<div class="content">
  <div class="left">
     <p>some content</p>
  </div>
  <div class="right">
     <p>some content</p>
  </div>
</div>

및 해당 CSS:

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

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

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

.right에 콘텐츠를 추가할 때 상위 .content div가 해당 높이를 수용할 만큼 늘어나지 않습니다. 확장된 영역을 덮는 보이지 않는 빨간색 배경이 생성됩니다.

문제 이해

이 경우 .left 및 .right와 같은 부동 요소는 문서의 일반적인 흐름에서 제거됩니다. . 이는 하위 요소가 물리적 공간을 차지하지 않기 때문에 더 이상 높이가 정의되지 않으므로 상위 요소에 영향을 미칩니다. 결과적으로 상위 요소는 자체적으로 축소됩니다.

해결책: 상자 크기 유지

이 문제를 해결하려면 부동 하위 요소에도 불구하고 상위 요소가 크기를 유지하도록 강제해야 합니다. 이는 .content에 Overflow: Hidden을 추가하여 달성할 수 있습니다.

.content {
    overflow: hidden;
}

또는 Overflow: auto를 사용하여 유사한 기능을 제공하면서 높이 불일치를 식별할 수 있습니다.

이것은 수정을 통해 .content가 부동 하위 항목을 캡슐화하여 잘린 빨간색 문제를 해결합니다. background.

대안: Clearfix

지원이 제한된 브라우저의 경우 Clearfix 해킹을 사용하면 이 문제를 해결할 수 있습니다. 그러나 이 접근 방식은 최신 브라우저 호환성을 위해 권장되지 않습니다.

위 내용은 플로팅 요소를 사용할 때 CSS 배경이 콘텐츠를 숨기는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!