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

CSS를 사용하여 부동 소수점을 지우는 7가지 방법의 장점과 단점

高洛峰

풀어 주다： 2017-03-21 14:28:52

원래의

2019명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!