CSS에서 수레를 지우는 방법은 무엇입니까

Css 부동소수점을 지우는 방법에는 클리어 속성, 오버플로 속성, 클리어픽스 클래스, 상위 요소의 클리어픽스 클래스, 부동소수를 지우는 의사 요소, 상위 요소의 오버플로 속성, BFC와 결합된 클리어 속성 등을 사용하는 것이 포함됩니다. 자세한 소개: 1. 플로팅 요소를 지우는 데 간단하고 일반적으로 사용되는 방법인 클리어 속성을 사용합니다. 플로팅 요소 뒤에 빈 블록 수준 요소를 추가하고 이에 대한 클리어 속성을 설정하면 이전 플로팅 효과를 지우고 만들 수 있습니다. 아래 요소는 정상적으로 배치됩니다.

이 튜토리얼의 운영 체제: Windows 10 시스템, DELL G3 컴퓨터.

CSS에서 부동 소수점은 요소가 일반적인 문서 흐름에서 벗어나 해당 컨테이너의 왼쪽 또는 오른쪽을 따라 부동하도록 하는 일반적인 레이아웃 기술입니다. 그러나 부동 요소의 높이가 다르거나 부동 요소 간에 겹치는 경우 레이아웃 혼란이나 예상치 못한 부작용이 발생할 수 있습니다. 이러한 문제를 해결하기 위해 부동 소수점을 지우는 다양한 방법을 사용할 수 있습니다. 아래에서는 부동 소수점을 지우기 위해 일반적으로 사용되는 CSS 메서드를 소개합니다.

1. 명확한 속성 사용:

명확한 속성은 부동 소수점을 지우는 데 간단하고 일반적으로 사용되는 방법입니다. 플로팅 요소 뒤에 빈 블록 수준 요소를 추가하고 클리어 속성을 설정하면 이전 플로팅 요소의 효과가 지워지고 그 아래 요소는 정상적으로 배치될 수 있습니다. Clear 속성은 왼쪽, 오른쪽, 둘 다 또는 없음으로 설정할 수 있습니다. 이는 왼쪽 부동소수점, 오른쪽 부동소수점을 지우거나 왼쪽 및 오른쪽 부동소수점을 동시에 지우거나 부동소수점을 각각 지우지 않음을 의미합니다.

샘플 코드:

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

샘플 HTML 코드:

   <div class="clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

2. 오버플로 속성 사용:

오버플로 속성은 부동 소수점을 지우는 데 일반적으로 사용되는 또 다른 방법입니다. 플로팅 요소의 컨테이너에서 오버플로 속성을 auto 또는 hide로 설정하면 BFC(블록 수준 포맷팅 컨텍스트)를 트리거하여 플로팅 효과를 지울 수 있습니다. 이는 BFC가 부동 요소를 포함하고 높이를 계산하여 컨테이너가 정상적으로 배치될 수 있기 때문입니다.

샘플 코드:

   .clearfix {
     overflow: hidden;
   }

샘플 HTML 코드:

   <div class="clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

3. 클리어픽스 클래스 사용:

클리어픽스 클래스는 플로팅 컨테이너에 클리어픽스 클래스를 추가하여 클리어할 수 있습니다. 요소. 이 메서드는 일반적으로 의사 클래스::after를 사용하여 빈 블록 수준 요소를 추가하고 해당 요소에 대한 명확한 속성을 설정합니다.

샘플 코드:

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

샘플 HTML 코드:

   <div class="clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

4. 상위 요소의 클리어픽스 클래스 사용:

어떤 경우에는 플로팅 요소의 상위 요소에 클리어픽스 클래스를 직접 추가하여 플로팅 효과 . 이 방법은 위에서 언급한 Clearfix 클래스 방법과 유사하지만 상위 요소에 Clearfix 클래스를 추가하면 모든 하위 요소의 플로팅 효과를 보다 편리하게 지울 수 있습니다.

샘플 코드:

   .parent-element::after {
     content: "";
     display: block;
     clear: both;
   }

샘플 HTML 코드:

   <div class="parent-element clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

5. 의사 요소를 사용하여 부동 소수점을 삭제합니다.

의사 클래스::after를 사용하는 것 외에도 의사 요소::before를 사용하여 삭제할 수도 있습니다. 수레. 플로팅 요소의 컨테이너에 빈 블록 수준 요소를 추가하고 콘텐츠 속성을 빈 문자열로 설정하면 BFC가 트리거되어 플로팅 효과를 지울 수 있습니다.

샘플 코드:

   .clearfix::before,
   .clearfix::after {
     content: "";
     display: table;
   }
   .clearfix::after {
     clear: both;
   }
   .clearfix {
     zoom: 1;
   }

샘플 HTML 코드:

   <div class="clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

6. 상위 요소의 오버플로 속성 사용:

플로팅 요소의 컨테이너에 오버플로 속성을 설정하는 것 외에도 오버플로 속성을 설정할 수도 있습니다. 상위 요소에서 플로팅 효과를 지웁니다. 이 방법은 위에서 언급한 오버플로 속성 방법과 유사하지만 상위 요소에 오버플로 속성을 설정하면 모든 하위 요소의 플로팅 효과를 더 쉽게 지울 수 있습니다.

샘플 코드:

   .parent-element {
     overflow: hidden;
   }

샘플 HTML 코드:

   <div class="parent-element">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

7. 클리어 속성과 BFC 사용:

어떤 경우에는 클리어 속성과 BFC를 결합하여 부동소수점을 지울 수 있습니다. 플로팅 요소 뒤에 빈 블록 수준 요소를 추가하고 해당 요소에 대한 지우기 속성을 설정한 다음 플로팅 요소 컨테이너의 오버플로 속성을 자동 또는 숨김으로 설정하면 이 두 가지 방법을 동시에 사용하여 지울 수 있습니다. 플로팅 효과.

샘플 코드:

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

샘플 HTML 코드:

   <div class="clearfix">
     <div class="float-left">左浮动元素</div>
     <div class="float-right">右浮动元素</div>
   </div>

요약하자면, 부동 소수점을 지우는 CSS 방법에는 클리어 속성, 오버플로 속성, 클리어픽스 클래스, 상위 요소의 클리어픽스 클래스, 부동 소수점을 지우는 의사 요소 및 상위 요소를 사용하는 것이 포함됩니다. BFC와 결합된 Overflow 속성, Clear 속성 등의 메소드입니다. 실제 개발에서는 페이지 레이아웃이 정확하고 기대에 부합하는지 확인하기 위해 특정 요구 사항과 레이아웃 조건에 따라 부동 항목을 지우는 적절한 방법을 선택할 수 있습니다.

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