CSS에서 Clear의 역할은 무엇입니까?

CSS의 명확한 속성은 플로팅 요소가 후속 요소에 미치는 영향을 지우고 후속 요소가 정상적으로 정렬되도록 하는 데 사용됩니다. Clear 속성에는 4가지 값이 있습니다. 없음: 부동 소수점 지우기 안 함 왼쪽: 맑은 왼쪽 부동 소수점 오른쪽: 클리어 오른쪽 부동 소수점 둘 다: 왼쪽 및 오른쪽 부동 소수점 지우기

CSS 레이아웃에서 클리어의 역할

Clear 속성은 부동 요소가 후속 요소에 미치는 영향을 지우는 데 사용됩니다. 부동 요소는 후속 요소의 위치에 영향을 미치므로 후속 요소가 정상적으로 정렬되지 않습니다.

수레 지우기

clear 속성의 값은 다음과 같습니다.

• none: 수레를 지우지 않습니다.
• 왼쪽: 왼쪽의 부동 요소를 지웁니다.
• right: 오른쪽에 떠 있는 요소를 지웁니다.
• 둘 다: 왼쪽과 오른쪽의 부동 요소를 지웁니다.

사용 시나리오

후속 요소를 플로팅 요소 아래에 정상적으로 정렬해야 하는 경우에는 Clear 속성을 사용할 수 있습니다. 예를 들면 다음과 같습니다.

<code class="css">.container {
  width: 100%;
}

.float-left {
  float: left;
  width: 50%;
}

.clear {
  clear: both;
}</code>

이 예에서는 .float-left 요소가 왼쪽에 부동하고, .clear 요소가 clean:both를 통해 부동 요소의 영향을 지워서 후속 요소가 정상적으로 정렬될 수 있도록 합니다.

예

다음 그림은 Clear 속성을 사용한 예입니다.

[그림은 두 요소를 보여줍니다. 왼쪽 요소는 플로팅, 오른쪽 요소는 Clear를 사용합니다. 둘 다]

오른쪽 요소는 Clear를 사용합니다. : 둘 다

[사진에서는 플로팅 요소가 지워지고 오른쪽 요소가 정상적으로 배열된 모습]

위 내용은 CSS에서 Clear의 역할은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!