'clear:both'는 CSS에서 요소의 위치를 ​​어떻게 제어합니까?

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

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

"clear: two"에 대한 설명

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

작동 방식

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

<div>

이 경우 "clear:both"가 포함된 div는 새 줄에서 시작하여 부동 항목과 함께 또는 그 아래에 인라인으로 표시되지 않도록 합니다. 위에 요소가 있습니다.

변형 및 예

요소를 원하는 방향으로 추가로 지정할 수 있습니다. "clear: left" 또는 "clear: right"를 사용하여 지웁니다. 이 옵션을 사용하면 왼쪽이나 오른쪽으로 설정된 부동 소수점을 지울 수 있습니다.

예를 들어 두 개의 사이드바가 있고 중앙에 기본 콘텐츠 영역이 있는 레이아웃이 있는 경우 "clear:both"를 사용할 수 있습니다. 플로트 방향에 상관없이 양쪽 사이드바 아래 공간을 차지하도록 기본 콘텐츠 div에 배치하세요.

위 내용은 'clear:both'는 CSS에서 요소의 위치를 ​​어떻게 제어합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!