CSS에서 클리어는 어떻게 작동하나요?

참고: 방금 아래 텍스트를 번역하여 여기에 게시했습니다. 참고자료는 이 글의 마지막 부분에 있습니다.

CSS 속성 Clear는 CSS 속성 float와 관련하여 작동합니다. 요소를 앞에 있는 "부동" 요소 아래로 이동해야 하는지 여부를 정의합니다.

예제를 통해 이해해 봅시다.

빨간색, 노란색, 파란색, 녹색 4개의 블록을 고려하여 차례로 추가하고 모두 동일한 레벨에 배치합니다.

그런 다음 각 요소를 하나씩 "왼쪽"으로 "부동"하게 만듭니다. 즉, 원래 위치보다 한 레벨 위로 이동하게 됩니다. 이렇게 하면 다른 "비부동" 요소가 부동 요소를 둘러쌀 수 있습니다.

참고 - 다음 블록은 플로팅 블록의 위치를 ​​차지하므로 보이지 않습니다. 다음 블록의 차원을 변경하면 그 위에 한 층 존재하는 플로팅 블록으로 덮여 있는 것을 관찰할 수 있습니다.

그 후에는 파란색 블록에 clear:left를 적용합니다. 즉, 파란색 블록 왼쪽에는 어떤 요소도 떠다니지 않습니다.

CSS 속성 Clear를 사용하면 플로팅 요소 중 어느 쪽이 플로팅을 수행할 수 없는지 지정할 수 있습니다. 떠다니는 물체와 관련된 위치를 정의하거나 반환합니다.

CSS 속성에서 허용되는 값은 명확합니다.

.element {
    clear: none;
    clear: left;
    clear: right;
    clear: both;
    clear: inline-start;
    clear: inline-end;

    clear: inherit;
    clear: initial;
    clear: revert;
    clear: revert-layer;
    clear: unset;
}

아래는 위에 표시된 예제에 대한 코드입니다.

HTML:

<div class="wrapper">
    <div class="red block"></div>
    <div class="yellow block"></div>
    <div class="blue block"></div>
    <div class="green block"></div>
</div>

CSS:

.wrapper{
    height:100vh;
    padding: 30px;
    text:center;
    background: #3A3B3C;
}
.block {
    height:40px;
    width:40px;
    border-radius: 4px;
}
.red {
    background: #CB6D51;
    float:left;
}
.yellow {
    background:#FBE7A1;
    float: left;
}
.blue {
    background: #3090C7;
    float: left;
    clear:both;
}
.green {
    background: #2E8B57;
    float: left;
}

이해를 돕기 위해 기본 예제를 사용하여 CSS 속성clear가 어떻게 작동하는지 다루려고 했습니다. 귀하의 사례를 공유하고 이 게시물에 자유롭게 추가해 주세요.

즐거운 배움이 되세요!??‍?

원천

Jasmin Virdi가 쓴 기사.

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