DivCSS 경험: 부동 소수점을 지우는 세 가지 실용적인 CSS 방법

DivCSS 웹 페이지 레이아웃을 사용할 때 부동 소수점이 자주 사용됩니다. 과거에는 부동 소수점 삭제에 대한 소개가 많이 있었습니다. 부동 소수점을 지우는 것은 필수이며 언제든지 상위 요소에서 부동 소수점을 지우는 것은 CSS 작성에 있어서 좋은 습관 중 하나로 간주됩니다.

오늘의 튜토리얼을 살펴보겠습니다. 코드를 실행하면 상위 요소의 연한 노란색 배경이 지워지지 않은 플로팅 소스 코드입니다.


플로트를 지우기 전 그림에 표시된 대로:



1. 빈 라벨을 사용하여 부유물을 제거합니다.

제가 오랫동안 사용해 온 방법은 빈 태그가 div 태그일 수도 있고 P 태그일 수도 있다는 것입니다. 나는 충분히 짧은 <P>를 사용하는 데 익숙합니다. 많은 사람들이 <hr>도 사용하지만 테두리를 지우기만 하면 되지만 이론상으로는 어떤 태그라도 될 수 있습니다. 이 방법은 부동 상위 요소 내의 모든 부동 요소를 지워야 하는 후 부동을 지우기 위해 이러한 태그를 추가하고 이에 대한 CSS 코드(clear:both)를 정의하는 것입니다. 이 접근 방식의 단점은 의미 없는 구조 요소가 추가된다는 것입니다.


2. 오버플로 속성을 사용하세요

이 방법은 빈 레이블 요소를 통해 부동 소수점을 지워 의도하지 않은 코드를 추가해야 하는 단점을 효과적으로 해결합니다. 이 방법을 사용하려면 플로팅을 제거해야 하는 요소에 CSS 속성인 Overflow:auto만 정의하면 됩니다. 그게 전부입니다! "zoom:1"은 IE6과의 호환성을 위한 것입니다.


3. 의사 객체 뒤에 사용하여 명확하게 떠오릅니다.

이 방법은 IE가 아닌 브라우저에만 적용됩니다. 구체적인 작성 방법은 다음 예를 참조하세요. 사용 시 다음 사항에 주의하시기 바랍니다. 1. 이 방법에서는 부동 요소를 지워야 하는 의사 개체에 대해 높이:0을 설정해야 합니다. 그렇지 않으면 요소가 실제 값보다 몇 픽셀 더 높아집니다. 2. 콘텐츠 속성이 필요하지만 그 값은 다음과 같습니다. 비어 있음, 파란색 이상적인 토론 이 방법에서는 content 속성의 값이 "."로 설정되어 있지만 비워 두는 것도 가능하다는 것을 알았습니다.


클리어 플로팅 후 그림과 같이:


이 세 가지 방법은 각각 장단점이 있으므로, 이를 사용할 때는 가장 좋은 방법을 선택해야 하며, 이에 비해 두 번째 방법이 더 바람직합니다.