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 태그 추가 clear:both
<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>
원리: 빈 p를 추가하고, CSS로 개선된 Clear:both를 사용하여 부동 소수점을 지워 부모 p가 자동으로 높이를 얻을 수 있도록 합니다.
장점: 간단하고, 코드가 적고, 브라우저가 잘 지원되며, 오류가 발생하지 않습니다. 이상한 문제
단점: 많은 초보자가 원리를 이해하지 못합니다. 페이지에 플로팅 레이아웃이 너무 많으면 빈 ps가 많이 추가되어 기분이 나빠집니다
제안: 권장하지 않는 사용 방법이지만 이 방법은
3, 부모 p 정의 pseudo-class :after 이전에 주로 사용되었던 클리어 플로트(clear float) 방법입니다. 및 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: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>
원칙: IE8 이상 및 IE 브라우저가 아닌 경우에만 :after를 지원합니다. 원칙은 방법 2와 다소 유사합니다. Zoom(IE 전송에는 속성) ie6 및 ie7의 부동 문제를 해결할 수 있습니다
장점: 우수한 브라우저 지원, 이상한 문제가 발생하지 않음(현재: Tencent, NetEase, Sina 등과 같은 대규모 웹사이트에서 사용됨)단점: 코드가 많다 초보자는 원리를 이해하지 못하기 때문에 주류 브라우저에서 지원하려면 두 줄의 코드를 사용해야 합니다. 권장사항: 사용을 권장하며, CSS 코드를 줄이기 위해 공개 클래스를 정의하는 것이 좋습니다. 4, 상위 p 정의overflow:hidden
<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:hidden을 사용할 때는 높이를 정의할 수 없습니다. 찾아보기 브라우저는 부동 영역의 높이를 자동으로 확인합니다장점: 간단하고 코드가 적으며 브라우저 지원이 우수합니다단점:
위치와 함께 사용할 수 없습니다. 과도한 크기는 숨겨집니다.
추천: 위치를 사용해 본 적이 없거나 Overflow:hidden에 대해 깊은 이해가 있는 친구에게만 권장됩니다. 5, 상위 p는 Overflow:auto<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>를 정의합니다. 원칙: 너비 또는 확대/축소:1을 정의해야 하며 높이는 정의할 수 없습니다. Overflow:auto를 사용하면 브라우저가 자동으로 확인합니다. 부동 영역 높이 장점: 간단하고 코드가 적으며 브라우저 지원이 좋음단점: 내부 너비와 높이가 상위 p를 초과하면 스크롤 막대가 나타납니다. 권장 사항: 권장되지 않습니다. 스크롤 막대를 표시해야 하거나 코드에 스크롤 막대가 표시되지 않도록 하려면 사용하세요. 6, 부모 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>원리: 모든 코드가 함께 떠다니며 전체가 된다장점: 장점 없음 단점: 새로움 떠다니는 문제가 발생하게 됩니다. 권장사항: 이해를 돕기 위해 권장하지 않습니다. 7, 상위 p는 디스플레이:테이블을 정의합니다
<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 속성을 장점: 장점 없음 단점: 알려지지 않은 새로운 문제가 발생합니다. 권장사항: 이해를 돕기 위해 권장하지 않습니다. 8, 끝에 br 태그를 추가합니다.clear:both
<style type="text/css"> .p1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1} .p2{background:#800080;border:1px solid red;height:100px} .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> <br class="clearfloat" /> </p> <p class="p2"> p2 </p>
위 내용은 CSS를 사용하여 부동 소수점을 지우는 7가지 방법의 장점과 단점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!