Float Clear가 유효하지 않은 경우 Overflow 속성이 작동하지 않는 이유, 이유 분석

float 삭제에 오버플로 속성이 유효하지 않은 이유는 무엇입니까? 이유 분석에는 특정 코드 예제가 필요합니다.

Float(float)는 CSS에서 일반적으로 사용되는 레이아웃 방법 중 하나이며 해당 기능은 문서 흐름에서 요소를 가져오는 것입니다. 요소의 왼쪽 또는 오른쪽에 떠 있도록 합니다. 그러나 부동 요소는 일부 레이아웃 문제를 일으킬 수 있습니다. 그 중 하나는 부동 요소가 상위 요소의 높이를 지원할 수 없어 상위 요소의 높이가 축소된다는 것입니다. 이 문제를 해결하기 위해 우리는 일반적으로 float를 제거하는 기술을 사용합니다.

부동을 지울 때 일반적으로 사용되는 속성은 Overflow:hidden입니다. 해당 기능은 부동 요소를 포함하는 새로운 BFC(블록 수준 서식 컨텍스트)를 만드는 것입니다. 그러나 때때로 Overflow:hidden을 설정해도 부동 소수점을 지우는 효과가 없는 경우가 있습니다. 이유는 무엇입니까? 함께 분석해 보겠습니다.

먼저 오버플로 속성이 어떻게 작동하는지 이해해야 합니다. Overflow:hidden이 설정되면 요소는 새로운 BFC를 생성합니다. BFC의 특징 중 하나는 부동 요소를 포함한다는 것입니다. 따라서 일반적인 상황에서 Overflow:hidden을 설정하면 부동 항목이 실제로 지워져 상위 요소가 부동 하위 요소를 정상적으로 표시하고 높이를 확장할 수 있습니다.

그러나 일부 특별한 경우에는 Overflow:hidden이 실패하고 작동하지 않습니다. 일반적인 상황 중 하나는 상위 요소의 높이가 부동 하위 요소에 의해 늘어나지만 상위 요소 자체에서는 높이를 설정하지 않는 것입니다. 이때 Overflow:hidden을 설정해도 플로트가 지워지지 않습니다.

요소가 특정 높이를 설정하지 않으면 기본적으로 콘텐츠에 따라 높이가 늘어나기 때문입니다. 플로팅된 요소는 더 이상 문서 흐름에서 위치를 차지하지 않으므로 상위 요소는 플로팅된 하위 요소의 높이를 감지할 수 없으므로 하위 요소와 관련하여 자체적으로 지원할 수 없습니다.

이 문제를 해결하기 위해 다른 방법을 사용하여 플로트를 제거할 수 있습니다. 일반적인 방법 중 하나는 빈 블록 수준 요소를 추가하고 해당 요소를 지우는 것입니다. 구체적인 코드는 다음과 같습니다.

<style>
    .clearfix:after {
        content: "";
        display: block;
        clear: both;
    }
    .box {
        width: 200px;
        border: 1px solid #ccc;
    }
    .float-left {
        float: left;
        width: 100px;
        height: 100px;
        background-color: red;
        margin-right: 20px;
    }
</style>

<div class="box clearfix">
    <div class="float-left"></div>
    <div class="float-left"></div>
    <!-- 添加一个空的块级元素用于清除浮动 -->
    <div class="clearfix"></div>
</div>

위 코드에서는 상위 요소 상자에 Clearfix 클래스를 추가하고 :before 또는 :after 의사 요소를 사용하여 빈 블록 수준 요소를 추가하고 삭제했습니다. .플로트 작동. 이렇게 하면 부동 소수점이 지워지고 상위 요소의 높이가 올바르게 늘어납니다.

위의 방법 외에도 Clearfix 클래스를 사용하여 부동 소수점을 지우거나 특수 부동 소수점 지우기 클래스 라이브러리를 사용하는 등 부동 소수점을 지우는 다른 방법이 있습니다. 상황에 따라 다른 플로트 청소 방법을 선택해야 할 수도 있습니다. 실제 개발에서는 특정 시나리오에 따라 가장 적합한 플로트 청소 방법을 선택하는 것이 중요합니다.

요약하자면, Overflow:hidden 설정은 플로팅으로 인한 높이 붕괴 문제를 해결하는 데 반드시 효과적인 것은 아닙니다. 일부 특수한 경우에는 상위 요소의 높이가 부동 하위 요소에 의해 늘어나며, Overflow:hidden 설정은 효과가 없습니다. 이 시점에서 다른 방법을 사용하여 부동 소수점을 올바르게 지우고 상위 요소의 높이가 올바르게 확장되도록 할 수 있습니다.

위 내용은 Float Clear가 유효하지 않은 경우 Overflow 속성이 작동하지 않는 이유, 이유 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!