명확한 CSS 속성은 CSS1 이후 CSS의 일부입니다. 삭제 된 요소 옆의 어떤 요소가 어떤면에 떠 다니는지 지정할 수 있습니다. clear 속성에는 5 가지 값이 있습니다.
- 없음
- 왼쪽
- 권리
- 양자 모두
- 상속하다
CSS clear 속성을 사용하는 방법
clear 속성을 사용하는 가장 일반적인 방법은 요소에 float 속성을 사용한 후입니다. 예 :
내 이미지 옆에 텍스트.
내 이미지 아래에있는 텍스트입니다.
모든 요소의 기본값은 clear입니다. none; , 다른 요소가 무언가에 떠 다니는 것을 원하지 않는다면 깨끗한 스타일을 변경해야합니다.
수레를 지울 때, 당신은 당신의 수레를 당신의 수레와 일치시킵니다. 따라서 요소를 왼쪽으로 띄우면 왼쪽으로 지워야합니다. 부유 된 요소는 계속 플로팅되지만 삭제 된 요소와 그 이후의 모든 요소는 웹 페이지의 하위 요소에 나타납니다.
요소가 오른쪽과 왼쪽 모두에 떠있는 경우 한 면만 지울 수도 있고 두면을 지울 수도 있습니다.
레이아웃에서 클리어 사용하기
대부분의 디자이너가 clear 속성을 사용하는 가장 일반적인 방법 은 페이지 요소의 레이아웃입니다 . 텍스트 블록 안에 이미지가 떠 다니고 다음 단락이 이미지 아래에서 시작되도록하거나 다른 텍스트 옆에 떠있는 텍스트 전체 열을 텍스트 아래에 표시 할 수 있습니다.
다음은이 양식의 레이아웃을위한 HTML입니다.
그것은 하나의 div 컨테이너가 왼쪽으로 떠있는 다른 컨테이너를 보유하고 있습니다.
짧은 부동 div
float div의 오른쪽에있을 컨테이너 div 내부 내용
이것은 기본 div의 나머지 내용 왼쪽에 짧은 div가 떠있는 상태로 잘 작동합니다.
플로팅 된 상자 옆에 텍스트를 지울 수 있습니다. 플로팅 된 상자 아래에 쓰기를 시작할 위치에 태그를 추가하기 만하면됩니다.
그러나이 문제는 떠 다니는 상자가 옆에있는 내용보다 길 때 발생합니다. 그러면 알 수 있듯이 주 상자의 배경색은 플로팅 된 상자의 아래쪽으로 이동하지 않습니다.
다행히도이 문제를 해결할 수있는 쉬운 방법이 있습니다. 메인 박스를 오버플로로 설정하면 자동으로 실행됩니다. 이 예제 에서와 같이 배경 색상 은 맨 아래로 떠있는 상자 옆에 유지됩니다.