CSS를 사용하여 부동 소수점을 지우는 방법-CSS 튜토리얼-php.cn

이 글은 주로 CSS를 사용하여 부동소수점을 삭제하는 방법을 소개합니다. 이제 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

표시 효과도 브라우저에 따라 다를 수 있습니다. 플로트 지우기는 더 어렵습니다. 여기에 플로트를 지우는 8가지 방법이 있습니다. 테스트는 IE Chrome Firefox Opera를 통과했습니다. 필요한 친구는 이를 참조할 수 있습니다.

플로트 지우기는 모든 웹 프런트엔드 디자이너가 마스터해야 하는 기능입니다. CSS 클리어 플로트 백과사전, 총 8가지 메소드.
플로팅은 현재 라벨이 위쪽으로 떠오르게 하며 전면 및 후면 라벨의 위치, 상위 라벨 및 너비 높이 속성에도 영향을 미칩니다. 더욱이 동일한 코드가 다양한 브라우저에서 다르게 표시될 수 있으므로 부동 소수점을 지우는 것이 더 어려워집니다. 부동 소수점으로 인해 발생하는 문제를 해결하는 방법에는 여러 가지가 있지만 일부는 브라우저 호환성에 문제가 있습니다.
다음은 부동소수점을 지우는 8가지 방법을 요약합니다(예: 크롬 파이어폭스 오페라 테스트를 통과했습니다. 다음 세 가지 방법은 이해를 돕기 위한 것입니다).
1 부모 p는 높이를 정의합니다.

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/height:200px;} 
.p2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

로그인 후 복사

원리: 부모 p는 높이를 수동으로 정의합니다. 부모 p가 자동으로 높이를 얻을 수 없는 문제를 해결합니다.
장점: 간단하고, 코드가 적고, 익히기 쉽습니다.
단점: 고정 높이 레이아웃에만 적합합니다. 높이가 상위 p와 다르면 문제가 발생합니다.
권장 사항: 권장되지 않음, 높이만 권장됨 고정 레이아웃에는
2를 사용하고 끝에 빈 p 태그를 추가합니다. 높이

장점: 간단하고 코드가 적으며 브라우저 지원이 우수하며 이상한 문제가 발생하지 않습니다.

단점: 페이지에 부동 레이아웃이 많으면 많은 초보자가 원리를 이해하지 못합니다. 사람들을 기분 나쁘게 만듭니다
권장 사항: 권장되지 않지만 이 방법은 과거에 부동 소수점을 지우는 데 주로 사용되었습니다.
3. 부모 p는 의사 클래스를 정의합니다: after 및 Zoom

<style type="text/css"> 
.p1{background:#000080;border:1px solid red} 
.p2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
/*清除浮动代码*/ 
.clearfloat{clear:both} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
<p class="clearfloat"></p> 
</p> 
<p class="p2"> 
p2 
</p>

로그인 후 복사

원칙: IE8 이상 및 IE가 아닌 브라우저에만 해당 지원: 이후 원리는 방법 2와 다소 유사하며, 확대/축소(속성으로 변환된 IE)는 ie6 및 ie7의 부동 문제를 해결할 수 있습니다.

장점: 우수한 브라우저 지원, 이상한 문제가 발생하지 않음(현재: 대규모 웹 사이트에서 사용됨) 예 : Tencent, NetEase, Sina 등)

단점 : 코드가 많고, 주류 브라우저에서 지원하려면 두 줄의 코드를 조합하여 사용해야 하는 초보자가 많습니다.
권장사항: CSS 코드를 줄이기 위해 공개 클래스를 정의하는 것이 좋습니다.
4. 상위 p는 Overflow:hidden을 정의합니다.

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;} 
.p2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
/*清除浮动代码*/ 
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfloat{zoom:1} 
</style> 
<p class="p1 clearfloat"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

로그인 후 복사

원칙: 너비 또는 확대/축소:1을 정의해야 하며 높이는 정의할 수 없습니다. Overflow:hidden을 사용하면 브라우저가 자동으로 부동 영역의 높이를 확인합니다.

이점: 간단하고, 코드 적고, 브라우저 지원이 좋습니다.

단점: 초과된 크기가 숨겨지기 때문에 위치와 함께 사용할 수 없습니다.
추천: 위치를 사용해 본 적이 없거나 Overflow:hidden에 대해 깊은 이해가 있는 친구에게만 권장됩니다.
5, 상위 p는 Overflow:auto를 정의합니다.

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden} 
.p2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

로그인 후 복사

원칙: 너비 또는 확대/축소:1을 정의해야 하며 높이는 정의할 수 없습니다. Overflow:auto를 사용하면 브라우저가 자동으로 부동 영역의 높이를 확인합니다.

장점: 간단합니다. , 코드 적음, 브라우저 지원이 좋음

단점: 내부 너비와 높이가 상위 p를 초과하면 스크롤 막대가 나타납니다.
권장 사항: 권장되지 않습니다. 스크롤 막대를 표시해야 하거나 코드에 스크롤 막대가 표시되지 않도록 하려면 사용하세요.
6. 상위 p도 함께 부동합니다.

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto} 
.p2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

로그인 후 복사

원리: 모든 코드가 함께 부동되어 전체가 됩니다.

장점: 장점이 없습니다.

단점: 새로운 부동 문제가 발생합니다.
권장사항: 이해를 돕기 위해 사용을 권장하지 않습니다.
7, 상위 p 정의 표시:테이블

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left} 
.p2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

로그인 후 복사

원리: p 속성을 테이블로 변환

장점: 이점 없음

단점: 알려지지 않은 새로운 문제가 발생합니다.
권장 사항: 이해를 돕기 위해 사용을 권장하지 않습니다.
8, 끝에 br 태그clear:both를 추가하세요.

<style type="text/css"> 
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;} 
.p2{background:#800080;border:1px solid red;height:100px;width:98%;} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<p class="p1"> 
<p class="left">Left</p> 
<p class="right">Right</p> 
</p> 
<p class="p2"> 
p2 
</p>

로그인 후 복사

원리: 상위 p는 IE 부동 문제를 해결하기 위해 Zoom:1을 정의하고, 끝에 br 태그clear:both를 추가하세요. 권장: 권장되지 않습니다. 이해.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!