CSS의 clear는 어떻게 작동합니까?

clear 속성은 float 속성과 관련하여 작동합니다. 요소가 앞에 있는 부동 요소 아래로 이동되어야 하는지 여부를 설정합니다.

예를 들어 이것을 이해합시다.

빨강, 노랑, 파랑, 초록의 4개 블록을 차례로 추가하고 모두 동일한 레벨에 배치하는 것을 고려할 것입니다.



그런 다음 각 요소를 하나씩 왼쪽으로 떠있게 만들 것입니다. 즉, 초기 위치보다 한 단계 위로 이동합니다. 이렇게 하면 부동이 아닌 다른 요소가 부동 요소를 둘러쌀 수 있습니다.



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

그런 다음 파란색 블록에 clear:left를 적용합니다. 즉, 파란색 블록의 왼쪽에 요소가 떠 있지 않습니다.



clear 속성의 도움으로 플로팅 요소의 어느 쪽이 플로팅이 허용되지 않는지 지정할 수 있습니다. 부동 객체에 대한 위치를 설정하거나 반환합니다.

명확한 속성에서 허용되는 값입니다.

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;

코드here를 찾을 수 있습니다.

더 나은 이해를 위해 기본적인 예제를 사용하여 CSS clear 속성의 작업을 다루려고 했습니다. 이 게시물에 추가할 수 있는 예와 느낌을 공유하세요 😊

행복한 학습!👩🏻‍💻