CSS3에서 플로트를 지우는 방법

CSS3 Clear Floats

웹 개발 중에 부동 소수점은 레이아웃에 사용되는 매우 일반적인 CSS 속성입니다. 플로팅을 사용하면 요소가 문서의 흐름에서 벗어나 필요에 따라 페이지에 자유롭게 배치될 수 있습니다. 그러나 플로팅에도 문제가 있습니다. 즉, 요소가 겹치거나 상위 요소의 높이가 붕괴될 수 있습니다. 이 문제를 해결하려면 몇 가지 트릭을 사용하여 플로트를 제거해야 합니다.

1. float이란

CSS에서 float는 요소의 위치를 ​​지정하는 방법입니다. 요소에 float 속성이 설정되면 문서 흐름에서 벗어나 외부 가장자리가 포함 요소의 가장자리 또는 다른 부동 요소의 가장자리에 닿을 때까지 왼쪽이나 오른쪽으로 이동합니다.

2. 플로팅 문제

플로팅을 사용하면 요소를 자유롭게 배치할 수 있지만 일부 문제가 발생할 수도 있습니다. 예를 들어 부동 요소로 인해 상위 요소의 높이가 축소되면 이 문제는 상위 요소에 대한 오버플로 속성을 설정하여 해결할 수 있습니다. 동시에, 플로팅으로 인해 요소가 겹칠 수도 있습니다. 이 문제는 Clear 속성을 사용하여 해결할 수 있습니다.

3. 부동소수점 삭제 방법

1. 클리어 속성을 사용하세요

CSS에서는 부동소수점 속성을 삭제하는 데 사용됩니다. 여기에는 왼쪽, 오른쪽, 둘 다 및 없음의 네 가지 값이 있습니다. 그중 left는 왼쪽 플로트를 지우는 것을 의미하고, right는 오른쪽 플로트를 지우는 것을 의미하며, 둘 다 왼쪽 및 오른쪽 플로트를 지우는 것을 의미하고, none은 어떤 플로트도 지우지 않음을 의미합니다.

예:

.clearfix { clear: both; }

이 예에서는 클리어픽스 클래스를 사용하여 부동 소수점을 삭제합니다. HTML에서는 부동 소수점을 삭제해야 하는 요소에 이 클래스를 추가할 수 있습니다.

<div class="clearfix">
  <div class="float-left"></div>
  <div class="float-right"></div>
</div>

2. 빈 요소 사용

clear 속성 외에도 빈 요소를 사용하여 부동 소수점을 삭제할 수도 있습니다.

<div class="clearfix">
  <div class="float-left"></div>
  <div class="float-right"></div>
  <div style="clear:both;"></div>
</div>

이 예에서는 빈 요소를 사용하여 부동 요소를 지웁니다. 이 요소는 페이지에 표시되지 않지만 부동 요소 아래 공간을 차지하므로 상위 요소가 겹치거나 높이가 붕괴되는 것을 방지합니다.

3. 상자 모델을 사용하세요

CSS3에서는 상자 크기 조정 속성을 사용하여 부동을 지울 수 있습니다. box-sizing에는 content-box와 border-box라는 두 가지 값이 있습니다. 그 중 content-box는 요소의 너비와 높이에 콘텐츠의 너비와 높이만 포함되는 것을 의미하고, border-box는 요소의 너비와 높이에 콘텐츠의 너비와 높이와 요소의 너비가 포함된다는 의미입니다. 국경.

예:

.clearfix {
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #ccc;
}

이 예에서는 상자 크기 조정을 사용하여 부동 소수점을 삭제했습니다. 테두리 상자가 설정되었으므로 패딩 및 테두리는 요소의 크기를 변경하지 않으므로 플로팅 요소가 겹치거나 상위 요소의 높이가 축소되는 문제를 피할 수 있습니다.

4. 요약

위의 소개를 통해 우리는 플로팅이 무엇인지, 플로팅으로 인해 발생하는 문제를 이해했습니다. 동시에 우리는 float를 지우는 세 가지 방법, 즉 Clear 속성 사용, 빈 요소 사용 및 상자 모델 사용도 배웠습니다. 실제 프로젝트에서는 실제 상황에 따라 적절한 부유물 제거 방법을 선택할 수 있습니다.

위 내용은 CSS3에서 플로트를 지우는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!