CSS_Experience Exchange에서 부동소수점을 지우는 일반적인 방법 요약

플로트를 제거하는 데 일반적으로 사용되는 세 가지 방법이 있습니다.
클리어되지 않은 플로팅 소스 코드입니다. 코드 실행 시 상위 요소의 연한 노란색 배경이 보이지 않습니다. ~

왼쪽 <style type="text/css"> <!-- *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} --> </style>그렇습니다<div id="layout"> <div id="left"> </div> <div id="right"></div> </div> [Ctrl+A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ] 1. 빈 라벨로 플로트를 지웁니다. 제가 오랫동안 사용해 온 방법은 빈 태그가 div 태그일 수도 있고 P 태그일 수도 있다는 것입니다. 나는 충분히 짧은

를 사용하는 데 익숙하며 많은 사람들이

---

도 사용합니다. 경계를 지우기만 하면 되지만 이론상으로는 어떤 라벨이든 될 수 있습니다. 이 방법은 부동 상위 요소 내의 모든 부동 요소를 지워야 하는 후 부동을 지우기 위해 이러한 태그를 추가하고 이에 대한 CSS 코드(clear:both)를 정의하는 것입니다. 이 접근 방식의 단점은 의미 없는 구조 요소를 추가한다는 것입니다.

왼쪽 <style type="text/css"> <!-- *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} .clr{clear:both;} --> </style>그렇습니다<div id="layout"> <div id="left"></div> <div id="right"> </div> <p class="clr"></p> </div> [Ctrl+A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ] 2. 오버플로 속성을 사용합니다. 이 방법은 빈 레이블 요소를 통해 부동 소수점을 지워 의도하지 않은 코드를 추가해야 하는 단점을 효과적으로 해결합니다. 이 방법을 사용하려면 플로팅을 제거해야 하는 요소에 CSS 속성인 Overflow:auto만 정의하면 됩니다. 그게 전부입니다! "zoom:1"은 IE6과의 호환성을 위한 것입니다.

왼쪽 <style type="text/css"> <!-- *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;overflow:auto;zoom:1;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} --> </style>그렇습니다<div id="layout"> <div id="left"> </div> <div id="right"></div> </div> [Ctrl+A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ] 3. 뒤에 의사 객체를 사용하여 명확하게 띄웁니다. 이 방법은 IE가 아닌 브라우저에만 적용됩니다. 구체적인 작성 방법은 다음 예시를 참조하세요. 사용 시 다음 사항에 주의하시기 바랍니다. 1. 이 방법에서는 부동 요소를 지워야 하는 의사 개체에 대해 높이:0을 설정해야 합니다. 그렇지 않으면 요소가 실제 값보다 몇 픽셀 더 높아집니다. 2. 콘텐츠 속성이 필요하지만 그 값은 다음과 같습니다. 비어 있음, 파란색 이상적인 토론 이 방법에서는 content 속성의 값이 "."로 설정되어 있지만 비워 두는 것도 가능하다는 것을 알았습니다.

왼쪽 <style type="text/css"> <!-- *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #layout:after{display:block;clear:both;content:"";visibility:hidden;height:0;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} --> </style>그렇습니다<div id="layout"> <div id="left"> <br><input onclick="runEx('runcode74943')" type="button" value="运行代码"> <input onclick="doCopy('runcode74943')" type="button" value="复制代码"> <input onclick="doSave(runcode74943)" type="button" value="保存代码">[Ctrl+A 모두 선택 참고: <a href="/article/23421.htm" title="查看具体详情" target="_blank">외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. </a>]</div> <br> <br> 이 세 가지 방법에는 각각 장단점이 있으므로 사용 시 가장 좋은 방법을 선택해야 하며 이에 비해 두 번째 방법이 더 바람직합니다. 위의 방법은 원본이 아니며 모두 인터넷에서 가져온 것입니다. 원본 작성자가 모든 권리를 보유합니다.</div>