CSS에서 'clear:both'의 목적은 무엇입니까?

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

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

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

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

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

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

사용 예

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

<div>

이 예에서는 "왼쪽 부동" div가 왼쪽으로 부동되어 "문단입니다" 텍스트가 둘러싸이게 됩니다. 그런 다음 "모두 지우기" div를 사용하여 왼쪽과 오른쪽을 모두 지우고 "새 단락입니다" 텍스트가 그 아래에 새 줄로 표시되도록 합니다.

결론

요소에 "clear:both"를 설정하면 이전에 플로팅된 요소 아래의 새 줄에서 시작하여 일관되고 제어된 레이아웃을 보장할 수 있습니다.

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