플로트 클리어 HTML

웹 개발에서는 플로팅 요소로 인한 레이아웃 문제가 자주 발생합니다. 플로팅 요소는 문서 흐름에서 벗어나 상위 요소의 높이가 축소되고 다른 형제 요소가 영향을 받습니다. 이러한 문제를 해결하려면 부동소수점 정리(floatclearing)를 사용해야 합니다.

플로트 지우기의 핵심은 상위 요소에 플로팅 요소가 포함되도록 하고 자체 높이를 다시 계산하는 것입니다. 일반적인 부동 청산 방법은 다음과 같습니다.

1. 빈 div 태그를 사용하여 부동 소수점 지우기

이 방법은 가장 초기이자 가장 일반적인 부동 소수점 지우기 방법입니다. 부동 요소 끝에 빈 div 태그를 추가하고 스타일을 클리어:모두로 설정하여 부동 요소를 지웁니다.

.clearfix{
    clear:both;
}

clearfix 클래스 이름을 상위 요소에 추가하면 플로팅 요소가 포함되어 상위 요소가 높이를 다시 계산하게 됩니다.

그러나 이 방법에는 다음과 같은 단점이 있습니다.

• 의미 없는 DOM 요소가 추가됩니다.
• 스타일을 추가해야 합니다.
• 원래 레이아웃이 파괴될 수 있습니다

따라서 이 방법을 최대한 적게 사용하십시오. 없는 한 더 나은 대안이 있습니다.

2. BFC 사용

BFC(블록 수준 서식 컨텍스트)는 웹에서 중요한 레이아웃 개념입니다. BFC는 다음과 같은 특성을 지닌 독립적인 레이아웃 블록으로 요소를 래핑할 수 있습니다.

• 내부 상자는 수직 방향으로 차례로 배치됩니다.
• 상자의 수직 거리는 여백에 따라 결정됩니다. 동일한 BFC에 속하는 두 개의 인접한 상자의 여백은 겹칩니다.
• BFC 영역은 플로트 박스와 겹치지 않습니다.
• BFC는 페이지의 독립 컨테이너입니다. 외부 요소는 내부 상자에 영향을 주지 않으며 그 반대의 경우도 마찬가지입니다.
• BFC 높이를 계산할 때 플로팅 요소도 계산에 참여합니다.

BFC를 상위 요소로 설정하면 하위 요소의 부동소수점을 지울 수 있습니다.

방법 1:

.container{
    overflow: hidden;
}

방법 2:

.container{
    display: flow-root;
}

이 방법에서는 DOM 요소를 추가할 필요가 없지만 BFC의 특성과 BFC가 레이아웃에 미치는 영향에 대한 어느 정도 이해가 필요합니다.

3. 의사 요소를 사용하여 플로트 지우기

플로팅 요소 뒤에 의사 요소를 추가하여 플로트 지우기 효과를 얻으세요. 구체적인 구현 방법은 다음과 같습니다.

.clearfix::after{
    content:"";
    display:block;
    clear:both;
}

부모 요소에 클리어픽스 클래스명을 추가하면 플로트를 클리어할 수 있습니다.

이 방법을 사용하려면 추가 스타일을 추가해야 하지만 의미 없는 DOM 요소를 추가하지 않으며 레이아웃에 영향을 주지 않습니다.

4. 플렉스 레이아웃 사용

플렉스 레이아웃은 CSS3의 새로운 레이아웃 방법입니다. 플렉스 레이아웃을 사용하면 수평 센터링, 수직 센터링 등과 같은 일부 레이아웃 문제를 쉽게 해결할 수 있습니다.

Flex 레이아웃을 사용하여 플로트를 지울 수도 있습니다. 구체적인 구현 방법은 다음과 같습니다.

.container{
    display: flex;
    flex-wrap: wrap;
}

상위 요소를 Flex 컨테이너로 설정하면 하위 요소가 자동으로 Flex 항목이 되며 줄바꿈은 Flex를 통해 제어할 수 있습니다. -wrap 속성. Flex 레이아웃의 특성으로 인해 상위 요소는 모든 하위 요소를 포함하고 자체 높이를 다시 계산하여 부동 소수점을 지우는 효과를 얻습니다.

단, 플렉스 레이아웃을 사용하면 원본 레이아웃이 손상될 수 있으므로 실제 필요에 따라 조정해야 한다는 점에 유의해야 합니다.

요약

위에서는 일반적인 부동 청소 방법을 소개합니다. 각 방법에는 장점과 단점이 있습니다. 실제 요구 사항에 따라 가장 적합한 솔루션을 선택하십시오. 그러나 어떤 방법을 사용하든 원래 레이아웃을 파괴하지 않고 플로트를 제거하는 데 주의를 기울여야 합니다.

위 내용은 플로트 클리어 HTML의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!