>  기사  >  웹 프론트엔드  >  떠돌다의 의미를 없애다

떠돌다의 의미를 없애다

WBOY
WBOY원래의
2024-02-19 18:37:12668검색

떠돌다의 의미를 없애다

부동 소수점을 지우는 것은 웹 페이지 레이아웃에서 요소가 부동 속성으로 설정되면 주변 요소가 영향을 받아 레이아웃 혼란이나 덮어쓰기가 발생할 수 있음을 의미합니다. 이 문제를 해결하려면 몇 가지 트릭을 사용하여 부동 소수점의 효과를 정리해야 합니다.

일반적으로 부동 요소는 상위 요소를 붕괴시키고 높이를 정상적으로 계산할 수 없으며 형제 요소가 가려지거나 잘못 배치될 수 있습니다. 이때 플로트를 지우고 요소를 일반 레이아웃으로 되돌려야 합니다.

부동 요소를 지우는 일반적인 기술은 다음과 같습니다.

  1. 부동 요소 뒤에 빈 div 레이블을 추가하고 레이블에 clear: 둘 다 설정하는 등 고정 높이 비부동 빈 레이블을 사용하여 부동 요소를 지웁니다. ; 속성. 이를 통해 상위 요소는 높이를 다시 계산하고 부동 효과를 지울 수 있습니다. clear: both; 属性。这样可以使父元素重新计算高度,清除浮动的影响。
<div class="clearfix"></div>

<style>
.clearfix {
  clear: both;
}
</style>
  1. 使用 overflow: hidden; 属性清除浮动,给浮动元素的父元素设置 overflow: hidden; 属性,可以让父元素自动扩展高度以包含浮动元素。
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

<style>
.parent {
  overflow: hidden;
}

.child {
  float: left;
}
</style>
  1. 使用伪元素 ::after
  2. <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
    </div>
    
    <style>
    .parent::after {
      content: "";
      display: table;
      clear: both;
    }
    
    .child {
      float: left;
    }
    </style>
      overflow:hidden; 속성을 ​​사용하여 부동 소수점을 지우고 overflow:hidden; 속성을 ​​상위 요소로 설정하세요. 플로팅 요소를 포함하도록 부모 요소의 높이가 자동으로 확장됩니다.

      rrreee

        의사 요소 ::after를 사용하여 플로팅을 지우고 다음 스타일을 플로팅 요소의 상위 요소에 설정한 다음 의사 요소를 추가하세요. 부동의 효과를 취소합니다.

        🎜rrreee🎜이러한 방법은 플로트를 제거하는 데 일반적으로 사용되는 방법입니다. 특정 필요에 따라 플로트의 영향을 제거하는 적절한 방법을 선택할 수 있습니다. 🎜🎜플로트 지우기는 웹 페이지 레이아웃에서 매우 중요한 부분으로, 레이아웃의 안정성과 가독성을 보장할 수 있습니다. 실제 개발에서는 다양한 상황에 따라 적절한 부동 청산 방법을 선택하는 것이 중요하며, 이는 웹 페이지의 표시 효과와 사용자 경험을 크게 향상시킬 수 있습니다. 🎜

    위 내용은 떠돌다의 의미를 없애다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    성명:
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.