CSS에서 부동 소수점을 지우는 일반적인 방법 요약 CSS는 {overflow:auto;zoom:1;}을 모두 삭제합니다.

일반적으로 사용되는 세 가지 float 지우기방법이 있습니다.

이것은 코드를 실행할 때 상위 요소의 밝은 노란색 배경이 보이지 않는 부동 소스 코드입니다.

<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>
<p id=”layout”>
<p id=”left”>Left</p>
<p id=”right”>Right</p>
</p>

플로트를 제거하는 세 가지 방법은 다음과 같습니다.

1. 빈 라벨을 사용하여 플로트를 제거합니다. 내가 오랫동안 사용해 온 방법 중 빈 태그는 p 태그일 수도 있고 P 태그일 수도 있습니다. 나는 충분히 짧은

를 사용하는 데 익숙합니다. 많은 사람들이

---

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

추가 태그를 사용하여 부동 요소를 지우는 것이 W3C권장입니다(부동 요소 닫기).
요소 또는 비어 있는

를 사용하는 경우 원하는 대로 선택할 수 있습니다(물론 다른 블록 수준 요소를 사용할 수도 있음). 그러나
자체에는 성능이 있으므로 추가 줄 바꿈이 있으므로 성능을 숨기려면 높이를 0으로 설정해야 합니다. 따라서 대부분의 경우 빈

를 사용하는 것이 더 적절합니다.

<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>
<p id=”layout”>
<p id=”left”>Left</p>
<p id=”right”>Right</p>
<p class=”clr”> </p>
</p>

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

overflow를 사용할 경우 페이지 성능에 영향을 미칠 수 있으며 이 영향은 확실하지 않습니다. 여러 브라우저에서 페이지를 테스트하는 것이 가장 좋습니다.

<style type=”text/css”>
<!–*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;overflow:auto;zoom:1; }/* overflow:auto可以换成overflow:hidden，zoom:1可以换成width:100%*/#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>
<p id=”layout”>
<p id=”left”>Left</p>
<p id=”right”>Right</p>
</p>

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>
<p id=”layout”>
<p id=”left”>Left</p>
<p id=”right”>Right</p>
</p>

이 세 가지 방법에는 각각의 장단점이 있습니다. 사용할 때는 가장 좋은 방법을 선택해야 합니다. 저는 개인적으로 더 안정적이고 신뢰할 수 있는 첫 번째 방법에 익숙합니다.

위 내용은 CSS에서 부동 소수점을 지우는 일반적인 방법 요약 CSS는 {overflow:auto;zoom:1;}을 모두 삭제합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!