CSS 플로트 및 클리어 플로트: 플로트 및 클리어 플로트 마스터하기

CSS 부동 및 투명 부동: 부동 및 투명 부동 기술을 익히려면 특정 코드 예제가 필요합니다.

웹 디자인 및 개발에서 CSS 부동(부동)은 일반적인 레이아웃 기술 중 하나입니다. float를 사용하여 요소를 왼쪽이나 오른쪽으로 이동하여 페이지의 요소를 조정하고 정렬할 수 있습니다. 그러나 부동 요소는 부모 요소의 높이가 접히는 등 페이지에 몇 가지 문제를 일으킬 수도 있습니다. 그러므로 수레를 사용하고 제거하는 기술을 익히는 것이 매우 중요합니다. 이 기사에서는 CSS 부동 및 투명 부동 기술에 중점을 두고 구체적인 코드 예제를 제공합니다.

1. CSS 플로트란 무엇인가요?

CSS 플로트는 일반적인 문서 흐름에서 요소를 이동하여 페이지의 왼쪽이나 오른쪽에 떠 있게 하는 레이아웃 기술입니다. 플로팅 요소는 문서 흐름에서 벗어나 다른 요소의 레이아웃에 영향을 줍니다. 일반적인 부동 속성 값에는 left(왼쪽으로 부동), right(오른쪽으로 부동) 및 없음(부동이 아님)이 포함됩니다.

플로팅 요소의 일반적인 응용 프로그램에는 이미지 및 텍스트 배치 효과, 다중 열 레이아웃, 탐색 모음 등이 포함됩니다. 예를 들어 다음 코드를 사용하여 요소를 왼쪽으로 부동하게 만들 수 있습니다.

.float-left {
  float: left;
}

2. CSS 부동의 특성

1. 요소가 문서 흐름을 벗어났습니다. 부동 요소가 일반 문서에서 벗어났습니다. 흐름이므로 문서 위치의 원래 공간을 차지하지 않습니다. 부동 요소는 다른 요소 위 또는 아래에 떠 있습니다.
2. 요소가 다른 요소의 위치에 미치는 영향: 플로팅 요소는 다른 요소의 배열 및 레이아웃에 영향을 미칩니다. 다른 요소의 부동을 제거하지 않으면 겹치거나 잘못 정렬될 수 있습니다.
3. 요소 크기 축소: 플로팅 요소의 너비는 플로팅 위치와 주변 요소에 맞게 내용에 따라 자동으로 축소됩니다.

3. CSS에서 부동 소수점을 지우는 팁

1. 부동 소수점을 지우는 기본 방법: 부동 요소의 상위 요소에 추가 요소를 추가한 다음 Clear 속성을 사용하여 부동 소수점을 지웁니다. 일반적인 명확한 속성 값에는 왼쪽, 오른쪽, 둘 다 및 없음이 포함됩니다.

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

2. 부동 소수점을 지우는 의사 클래스 방법: ::after 의사 클래스를 사용하여 부동 요소의 상위 요소에 빈 요소를 삽입하고 부동 소수점에서 이를 지웁니다.

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

3. Clear float Clearfix 클래스: Clearfix라는 클래스를 생성하고 이를 플로트 요소의 상위 요소에 직접 적용하여 플로트를 지울 수 있습니다.

.clearfix {
  overflow: auto;
  zoom: 1;
}

4. 코드 예제

다음은 float 및 Clear float를 사용한 코드 예제입니다.

<style>
  .float-left {
    float: left;
    width: 50%;
  }
  
  .float-right {
    float: right;
    width: 50%;
  }
  
  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }
</style>

<div class="float-left">左侧内容</div>
<div class="float-right">右侧内容</div>
<div class="clearfix"></div>

위 코드 예제에서는 float 속성을 사용하여 페이지의 왼쪽과 오른쪽에 두 개의 div 요소를 띄웁니다. 각각 측면. 그런 다음 부동 소수점을 지우기 위해 상위 요소에 Clearfix 클래스가 추가되었습니다. 이렇게 하면 상위 요소가 부동 요소를 올바르게 포함하고 정렬할 수 있습니다.

요약:

CSS 플로트 및 클리어 플로트 기술을 익히는 것은 웹 디자인 및 개발에 매우 ​​중요합니다. float를 사용하면 페이지 레이아웃과 요소 위치를 조정할 수 있고, float를 지우면 부동 요소로 인해 발생하는 문제를 해결할 수 있습니다. 이 기사에 제공된 특정 코드 예제가 독자가 부동 소수점 및 투명 부동 소수점을 더 잘 이해하고 사용하는 데 도움이 되기를 바랍니다.

위 내용은 CSS 플로트 및 클리어 플로트: 플로트 및 클리어 플로트 마스터하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!