부동소수점을 지우는 여러 CSS 방법 공유-CSS 튜토리얼-php.cn

부동소수점을 지우는 여러 CSS 방법 공유

小云云

풀어 주다： 2018-02-28 10:58:49

원래의

1338명이 탐색했습니다.

이 기사에서는 주로 CSS에서 부동 소수점을 지우는 여러 가지 방법을 공유합니다. 도움이 되기를 바랍니다.

1. 부모 p는 높이를 정의합니다.

<style type="text/css"> .p1{background:#000080;border:1px solid red;height:200px;}
    .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는 높이를 수동으로 정의하여 부모 p가 자동으로 높이를 얻을 수 없는 문제를 해결합니다(고정 높이가 있는 레이아웃에만 권장됨)

2. 끝에 있는 태그 삭제: 둘 다

<style type="text/css"> .p1{background:#000080;border:1px solid red}
    .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，利用css提高的clear：both清除浮动，让父级p自动获取高度（以前使用的较多）

로그인 후 복사

3. 상위 p는 의사 클래스 정의: after 및 Zoom

<style type="text/css"> .p1{background:#000080;border:1px solid red;}
    .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>

로그인 후 복사

IE8 이상 및 IE 이외의 브라우저에서만 지원: after, Zoom(예: 독점 속성)은 부동 문제를 해결할 수 있습니다. IE6 및 IE7

4, 상위 p 정의 오버플로: Hidden

<style type="text/css"> .p1{background:#000080;border:1px solid red;width:98%;overflow:hidden}
    .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>

로그인 후 복사

必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

로그인 후 복사

5. 상위 정의: Overflow:auto

<style type="text/css"> .p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto}
    .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>

로그인 후 복사

必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度

로그인 후 복사

6. 상위 p도 함께 부동됩니다.

<style type="text/css"> .p1{background:#000080;border:1px solid red;width:98%;margin-bottom:10px;float:left}
    .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>

로그인 후 복사

모든 코드는 함께 부동됩니다. 이해를 돕기 위해

7. 부모 p는 display:table을 정의합니다.

<style type="text/css"> .p1{background:#000080;border:1px solid red;width:98%;display:table;margin-bottom: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의 속성을 테이블로 바꿉니다

8. clear:both 끝에 br 태그를 추가합니다.

<style type="text/css"> .p1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
    .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는 확대/축소를 정의합니다. 1. IE 부동 문제를 해결하려면 끝에 br 태그 클리어를 추가하세요. 둘 다