부동을 제거하기 위해 CSS를 사용하는 여러 가지 방법을 설명하는 예

CSS 레이아웃에서 부동은 매우 중요한 속성입니다. 요소의 부동 방향을 설정하면 페이지 레이아웃 효과를 쉽게 얻을 수 있습니다. 그러나 플로팅 요소는 특히 상위 요소가 높이를 설정하지 않은 경우 일부 문제를 일으킬 수 있습니다. 플로팅 하위 요소로 인해 상위 요소의 높이가 축소되어 페이지 레이아웃에 혼란이 발생할 수 있습니다. 따라서 플로트를 올바르게 제거하는 것도 웹 개발의 중요한 부분입니다.

이 기사에서는 예제를 사용하여 부동 소수점 지우기, 의사 요소 사용, CSS 그리드 및 기타 기술 사용을 포함하여 부동 소수점을 제거하는 몇 가지 방법을 보여줍니다.

1. 플로트 지우기

가장 일반적인 방법 중 하나는 플로트를 지우는 것입니다. 부동 요소를 제거하는 효과를 얻기 위해 부모 요소나 부동 요소 뒤에 명확한 부동 태그를 추가할 수 있습니다.

수레를 지우는 방법에는 여러 가지가 있습니다. 가장 일반적인 방법은 빈 태그를 사용하고 CSS를 통해 부동 소수점을 지우는 효과를 설정하는 것입니다. <div>和<span>

예를 들어 상위 요소에 여러 개의 부동 요소가 포함된 경우 요소 끝에 빈 div 태그를 추가한 다음 CSS 파일의 태그에clear:both 속성을 추가할 수 있습니다.

<div class="parent">
  <div class="child-float"></div>
  <div class="child-float"></div>
  <div class="clear-fix"></div>
</div>

.clear-fix{
  clear:both;
}

이런 방법으로 상위 요소의 부동소수점을 쉽게 제거할 수 있습니다.

2. 의사 요소 사용

플로트를 지우는 것 외에도 CSS 의사 요소를 사용하여 플로팅 요소로 인해 발생하는 문제를 해결할 수도 있습니다. CSS3에서는 각각 요소 앞과 뒤에 가상 요소를 추가하는 것을 나타내는 :before 및 :after 의사 요소를 사용할 수 있습니다.

부모 요소에 ::after 의사 요소를 추가하여 자식 요소의 부동을 지울 수 있습니다. 구체적인 방법은 Clearfix 클래스(예: Clearfix::after)를 부모 요소에 추가하는 것입니다. .clearfix::after CSS 파일에 내용을 추가하세요: "";

<div class="parent clearfix">
  <div class="child-float"></div>
  <div class="child-float"></div>
</div>

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

또한 의사 요소를 사용하여 플로팅 요소에 래핑 레이어를 추가할 수도 있습니다. 구체적인 방법은 플로팅 요소에 ::before 및 ::after 의사 요소를 추가하고 이 두 항목에 content: "" 표시를 설정하는 것입니다. :table 속성 값을 사용하여 레이어 래핑 효과를 얻을 수 있습니다.

<div class="parent">
  <div class="float-wrap">
    <div class="child-float"></div>
    <div class="child-float"></div>
  </div>
</div>

.float-wrap::before, .float-wrap::after{
  content:"";
  display:table;
}

.float-wrap::after{
  clear:both;
}

3. CSS 그리드 사용

CSS 그리드는 보다 유연한 레이아웃 방법을 제공하는 새로운 레이아웃 방법입니다. CSS 그리드를 사용하면 복잡한 페이지 레이아웃 효과를 쉽게 얻을 수 있습니다. CSS 그리드를 사용할 때 Grid-auto-rows 속성을 사용하면 행 높이를 자동으로 조정하여 하위 요소의 높이에 맞출 수 있습니다.

<div class="parent-css-grid">
  <div class="child-float"></div>
  <div class="child-float"></div>
</div>

.parent-css-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(min-content, max-content);
}

이 예에서는 상위 요소를 그리드 레이아웃으로 설정한 다음 두 개의 열(1fr 및 1fr)을 설정하고 Grid-auto-rows 속성을 사용하여 하위 요소의 높이에 맞게 행 높이를 자동으로 조정합니다. . 이렇게 하면 자식 요소가 떠 있는 경우에도 다양한 브라우저와 원활하게 호환될 수 있습니다.

요약

위의 방법을 사용하면 플로팅을 쉽게 제거하고 상위 요소의 높이 붕괴로 인한 문제를 피할 수 있습니다. 물론 다양한 시나리오에서는 다양한 플로팅 솔루션이 있을 수 있습니다. 올바른 솔루션을 선택하면 페이지 레이아웃 효과를 개선하고 웹 개발 효율성을 높이는 데 도움이 될 수 있습니다.

위 내용은 부동을 제거하기 위해 CSS를 사용하는 여러 가지 방법을 설명하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!