>웹 프론트엔드 >CSS 튜토리얼 >CSS에서 클리어의 의미는 무엇입니까?

CSS에서 클리어의 의미는 무엇입니까?

下次还敢
下次还敢원래의
2024-04-28 15:54:15653검색

CSS의 명확한 속성은 요소와 이전 부동 요소 간의 관계를 제어합니다. 없음: 부동 요소의 영향을 받지 않습니다. 왼쪽: 왼쪽 부동 요소 지우기, 둘 다: 왼쪽 및 오른쪽 부동 요소 지우기.

CSS에서 클리어의 의미는 무엇입니까?

CSS의 명확한 의미

clear는 요소와 그 앞에 있는 부동 요소의 관계를 제어하는 ​​CSS의 속성입니다. 요소가 부동되면 일반적인 문서 흐름에서 벗어나 후속 요소가 그 위로 흐를 수 있습니다. Clear 속성은 후속 요소가 부동 요소 아래에 나타나도록 강제합니다.

Syntax

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

Values

  • none: 요소는 이전 부동 요소의 영향을 받지 않습니다.
  • left: 요소는 왼쪽의 부동 요소를 지웁니다.
  • right: 요소는 오른쪽의 부동 요소를 지웁니다.
  • both: 요소는 왼쪽과 오른쪽의 부동 요소를 지웁니다.

Example

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

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

.no-clear {
  clear: none;
}

.left-clear {
  clear: left;
}

.right-clear {
  clear: right;
}

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

Effect

  • .no-clear는 이전 부동 요소를 지우지 않으며, .float-left는 .no-clear에 나타납니다. / 코드>. <code>.no-clear 不会清除前面的浮动元素,.float-left 将会出现在 .no-clear 的上方。
  • .left-clear 会清除左边的浮动元素,.float-left 将会出现在 .left-clear 的上方。
  • .right-clear 会清除右边的浮动元素,.float-left 将会出现在 .right-clear 的下方。
  • .both-clear 会清除左右两边的浮动元素,.float-left 将会出现在 .both-clear
  • .left-clear는 왼쪽 부동 요소를 지우고 .float-left는 .left-clear 위에 나타납니다.

.right-clear는 오른쪽의 부동 요소를 지우고 .float-left는 .right-clear 아래에 나타납니다. .both-clear는 왼쪽과 오른쪽의 부동 요소를 지우고 .float-left는 .both-clear 아래에 나타납니다.

🎜Usage🎜🎜🎜clear 속성은 일반적으로 플로팅 레이아웃에서 요소의 레이아웃과 순서를 제어하는 ​​데 사용됩니다. 콘텐츠가 부동 요소로 덮이거나 가려지지 않도록 합니다. 🎜

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

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