CSS 스타일링에서 'clear:both'의 역할 이해

웹 디자인 작업 시 플로팅 개념을 이해하는 것이 중요합니다. 요소와 그 위치를 제어하는 ​​방법. "clear: 둘 다" 스타일 속성은 이러한 맥락에서 귀중한 도구로 나타납니다.

"clear: 둘 다"에 대한 설명

"clear: 둘 다" 속성을 사용하면 앞에 오는 부동 소수점 요소 아래 공간을 차지하는 요소입니다. 요소가 새 줄에서 시작되도록 강제하여 요소가 플로팅된 요소와 겹치거나 방해하지 않도록 합니다.

작동 방식

요소를 플로팅하면 요소가 이동됩니다. 문서의 일반적인 흐름에서 벗어나 다른 요소가 문서를 둘러쌀 수 있습니다. "clear:both"를 적용하면 현재 요소가 이전 부동 소수점의 존재를 무시하고 존재하지 않는 것처럼 동작하도록 지시합니다. 이 동작은 다음 코드 예제에서 설명됩니다.

이 경우 "clear:both"가 포함된 div는 새 줄에서 시작되어 표시되지 않도록 합니다. 그 위에 있는 부동 요소와 인라인 또는 그 아래에 있습니다.
변형 및 예
요소를 어느 방향으로 배치할지 추가로 지정할 수 있습니다. "clear: left" 또는 "clear: right"를 사용하여 지웁니다. 이 옵션을 사용하면 왼쪽 또는 오른쪽으로 설정된 부동 소수점을 지울 수 있습니다.
예를 들어 두 개의 사이드바가 있고 중앙에 기본 콘텐츠 영역이 있는 레이아웃이 있는 경우 "clear: two"를 사용할 수 있습니다. 플로트 방향에 관계없이 양쪽 사이드바 아래 공간을 차지하도록 기본 콘텐츠 div에 배치합니다.