CSS에서 "clear:both"의 역할 이해

웹 페이지에 왼쪽이나 오른쪽으로 떠 있는 요소가 있는 경우 다음을 수행할 수 있습니다. 후속 요소가 주변으로 흐르도록 합니다. 이를 방지하기 위해 CSS는 특정 측면(왼쪽, 오른쪽) 또는 "모두"로 설정할 수 있는 "clear" 속성을 제공합니다.

"clear:both"의 용도는 무엇입니까? ?

"clear:both"는 요소가 왼쪽과 오른쪽으로 부동된 이전 요소 아래로 떨어지도록 지시합니다. 이렇게 하면 플로팅된 요소를 둘러쌀 수 있는 여백이나 패딩을 지우고 새 줄에서 시작할 수 있습니다.

"clear:both"는 어떻게 작동하나요?

일반적인 문서 흐름에서는 요소가 세로로 쌓여 있고 콘텐츠가 요소 주위로 흐릅니다. 그러나 요소가 부동되면 왼쪽이나 오른쪽으로 이동하여 다른 콘텐츠가 그 아래로 흐를 수 있습니다. "clear:both"는 현재 요소가 이전에 양쪽에 떠 있던 요소 아래에서 시작하도록 지시합니다.

사용 예

다음 HTML 코드를 고려하세요.

이 예에서는 '왼쪽 부동' div가 왼쪽으로 부동되어 '문단입니다' 텍스트가 둘러싸이게 됩니다. 그런 다음 "모두 지우기" div를 사용하여 왼쪽과 오른쪽을 모두 지우고 "새 단락입니다" 텍스트가 새 줄 아래에 표시되도록 합니다.
결론 
요소에 "clear:both"를 설정하면 이전에 플로팅된 요소 아래의 새 줄에서 시작하여 일관되고 제어된 레이아웃을 보장할 수 있습니다.