클리어 플로팅은 페이지를 만드는 사람이라면 누구나 겪게 되는 일이지만 누구나 분명하게 알고, 종합적으로 이해할 수 있을까? 그래서 시간이 좀 나면 이렇게 글을 썼습니다. 모든 내용을 다룰 수는 없지만, 기본적으로 제가 아는 것을 모두에게 가르칠 수는 있습니다.
부동소수점을 제거하는 방법이 몇 가지인지 대략적으로 살펴보겠습니다(IE에서 Zoom:1을 사용하는 방법에 대해서는 쓰지 않겠지만 다음 주제에서 이에 대해 쓰겠습니다). 해당 DEMO
- 후속 빈 제어를 위해 높이가 0인 의사 클래스 레이어를 지우려면 의사 클래스:after를 사용하십시오.
- 높이를 지원하려면 CSS Overflow:auto를 사용하세요.
- 이상한 적응을 생성하기 위해 CSS 오버플로:숨김 사용
- 디스플레이:테이블을 사용하여 객체를 테이블 형식으로 변환
- div 태그와 CSS의 명확한 속성을 사용하십시오.
- br 태그와 CSS의 명확한 속성을 사용하십시오.
- br 태그와 자체 HTML Clear 속성을 사용하세요.
얼핏 보면 둘 다 문제를 해결할 수 있지만 각자의 장단점이 있습니다. (일대일 대응)
- 장점 구조 의미론은 완전히 정확하며 다른 이상한 문제는 발생하지 않습니다.
단점 부적절한 재사용 방법은 쉽게 코드 양을 급격히 증가시킬 수 있습니다.
가장 바깥쪽 레이어가 가볍게 떠있을 때나 모듈식 재사용 방식을 이해하는 분들에게 사용을 권장합니다 . - 장점 : 구조 의미가 완전히 정확하고 코드 양이 매우 적습니다.
단점 : 여러 번 중첩한 후 가장 바깥쪽의 가벼운 부동 상자를 클릭하면 가장 바깥쪽 레이어에서 가장 안쪽 레이어까지의 모든 콘텐츠가 선택되거나(FF) 마우스 오버로 인해 너비가 변경되면 가장 바깥쪽 모듈에 스크롤이 발생합니다. 바(IE).
모듈을 하나의 모듈 내에서 사용하는 것이 좋습니다 . 중첩하지 마십시오. - 장점 : 구조 의미가 완전히 정확하고 코드 양이 매우 적습니다.
단점: 내용이 늘어나면 자동으로 줄 바꿈이 되기 쉽고 내용이 숨겨집니다.
너비가 고정되어 중첩되지 않을 때 사용하는 것이 좋습니다 . - 장점 : 구조 의미가 완전히 정확하고 코드 양이 매우 적습니다.
단점 상자 모델의 속성이 변경되었습니다. 셀 수 있는 것보다 더 많은 이상한 이벤트가 있을 수 있습니다.
버그를 고쳐서 죽고 싶지 않다면 사용하지 않는 것이 가장 좋습니다. 그러나 알파 버전에서는 테스트용으로 임시 속임수로 사용될 수 있습니다. - 장점: 코드의 양이 매우 적고 재사용성이 매우 높습니다.
단점은 의미론에 완벽하게 적응할 수 없고 수정 및 요구 변경에 도움이 되지 않는다는 것입니다.
초보자에게 권장되며 , 떠다니는 문제를 빠르게 해결할 수 있습니다. - 장점: 의미론적 수준이 다섯 번째 경우보다 낫습니다. 코드 양이 매우 적고 재사용성이 매우 높습니다.
단점: 의미 체계가 아직 완벽하지 않아 수정 및 요구 변경에 도움이 되지 않습니다.
초보자에게 권장되며 , 떠다니는 문제를 빠르게 해결할 수 있습니다. - 장점: 의미론적 수준이 사례 5 및 6보다 우수하며 코드 양이 최소화되고 재사용성이 매우 높습니다.
단점: 의미 체계가 아직 완벽하지 않아 수정 및 요구 변경에 도움이 되지 않습니다.
초보자들이 클래스명을 사용하여 성능을 제어하는 것보다 웹 페이지의 WEB1.0 시대로 돌아가 직접 html 속성을 사용하여 성능을 제어하는 것이 더 낫다는 것을 이해할 수 있도록 사고를 업그레이드할 때 사용하도록 안내 하는 것이 좋습니다 . 결국 후자는 코드가 적습니다.
드디어 목록이 완성되었습니다. 그러나 제가 Ghost에 재인쇄한 기사에 대해 모든 분들께 사과할 필요가 있다고 생각합니다. Ghost의 제목을 "가장 쉬운"에서 "최적의"로 변경하여 나중에 많은 학생들을 오해하게 만든 점을 매우 후회합니다. 그래서 여러분과 공유하고자 글을 다시 썼습니다.
원문: http://webteam.tencent.com/?p=1122
