CSS에서 Clear의 기능은 무엇입니까?

CSS 클리어 속성(clear)은 부동 요소가 부동 요소 아래로 흐르지 않도록 요소와 부동 요소 사이의 관계를 제어하는 ​​데 사용됩니다. 사용법은 다음과 같습니다: 없음: 왼쪽 부동 지우기 안 함 오른쪽: 오른쪽 부동 지우기 모두 지우기: 왼쪽 및 오른쪽 부동 부동 지우기

CSS에서 Clear 속성의 역할

clear 속성은 다음과 같습니다. 요소의 부동을 제어하는 ​​데 사용됩니다. 요소 간의 관계는 부동되지 않은 요소가 부동된 요소 아래로 흐르지 않도록 보장합니다.

Usage

<code class="css">clear: none | left | right | both;</code>

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

Function

요소가 부동되면 해당 요소는 문서 흐름 외부에 배치되고 이후의 부동되지 않은 요소는 부동 요소 아래로 흐릅니다. Clear 속성은 플로팅되지 않은 요소의 클리어 값을 설정하여 플로팅된 요소 위에서 시작하도록 강제합니다.

예를 들어 다음 코드는 단락 요소가 부동 이미지 아래로 흐르지 않도록 합니다.

<code class="css">p {
  clear: both;
}</code>

Example

다음 HTML 코드를 가정합니다.

<code class="html"><div class="container">
  <div class="image float-left"></div>
  <p>段落</p>
</div></code>

clear 속성이 설정되지 않은 경우 단락 요소는 아래 이미지 요소 아래로 흘러 레이아웃이 혼란스러워집니다.

clear 속성을 설정하면 단락 요소가 이미지 요소 위에서 시작되도록 할 수 있습니다.

<code class="css">.container {
  width: 500px;
}

.image {
  float: left;
  width: 200px;
  height: 200px;
  background: #f00;
}

p {
  clear: both;
}</code>

이 예에서는 단락 요소가 이미지 요소 위에서 시작되도록 강제하여 레이아웃을 명확하고 선명하게 만듭니다.

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