다양한 높이로 부동 요소가 겹치는 것을 방지하려면 어떻게 해야 합니까?

높이가 다양한 플로팅 요소: 형제 대체 방지

플로팅 요소는 콘텐츠를 가로로 정렬하는 편리한 방법을 제공합니다. 그러나 이러한 요소의 높이가 다양하면 예상치 못한 레이아웃 문제가 발생할 수 있습니다. 이 경우, 키가 큰 요소는 후속 형제 요소가 올바르게 정렬되는 것을 방해할 수 있습니다.

이 문제를 해결하기 위해 CSS는 몇 가지 기술을 제공합니다. 이러한 접근 방식 중 하나는 nth-of-type() 선택기를 활용하여 시퀀스에서의 위치를 ​​기반으로 특정 요소를 식별하는 것입니다. 이 경우 :nth-of-type(3n 1) 규칙을 활용하여 세 번째 부동 요소 집합의 첫 번째 요소에 특정 스타일을 적용할 수 있습니다.

이 CSS 속성을 추가하여 다음을 정의합니다. 세 번째 부동 요소마다 이전 부동 요소를 지워 두 번째 행이 첫 번째 행 아래에 정렬되도록 해야 합니다.

figure:nth-of-type(3n+1) {
    clear:left;
}

이 기술은 지정된 요소에 대한 부동 동작을 효과적으로 재설정하여 다음을 허용합니다. 새 줄을 시작하여 겹치는 문제를 해결합니다.

이 내용을 실제로 설명하려면 업데이트된 JSFiddle 예를 참조하세요: [](https://jsfiddle.net/KatieK/5Upbt/).

위 내용은 다양한 높이로 부동 요소가 겹치는 것을 방지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!