CSS에서 플로트를 지우는 방법
- 醉折花枝作酒筹원래의
- 2021-04-06 18:16:114520검색
부동산을 지우는 방법: 1. "height: height" 구문을 사용하여 상위 div에서 높이를 정의합니다. 2. 끝에 빈 div를 추가하고 "clear:both" 스타일을 설정합니다. 상위 div의 ":after" 및 확대/축소 4. 상위 div는 "overflow:hidden"을 정의합니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
플로팅은 현재 라벨이 위쪽으로 떠오르게 하며, 전면 및 후면 라벨, 상위 라벨의 위치 및 너비 높이 속성에도 영향을 미칩니다.
그리고 동일한 코드가 다양한 브라우저에서 다르게 표시될 수 있으므로 플로트 지우기가 더 어려워집니다.
플로트로 인해 발생하는 문제를 해결하는 방법에는 여러 가지가 있지만 일부 방법에는 브라우저 호환성에 문제가 있습니다.
1. 상위 div 정의 높이
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.div1{
background:#000080;
border:1px solid red;
/*解决代码*/
height:200px;
}
.div2{
background:#800080;
border:1px solid red;
height:100px;
margin-top:10px;
width:98%
}
.left{
float:left;
width:20%;
height:200px;
background:#DDD
}
.rightright{
float:rightright;
width:30%;
height:80px;
background:#DDD
}
</style>
</head>
<body>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">div2</div>
</body>
</html>원리: 상위 div의 높이를 수동으로 정의하면 상위 div가 자동으로 높이를 얻을 수 없는 문제가 해결됩니다.
장점: 간단하고, 코드가 적고, 익히기 쉽습니다.
단점: 고정 높이 레이아웃에만 적합하며, 높이가 상위 div와 다르면 문제가 발생합니다.
2. 마지막에 빈 div 태그 clear:both
<style type="text/css">
.div1{
background:#000080;
border:1px solid red
}
.div2{
background:#800080;
border:1px solid red;
height:100px;
margin-top:10px
}
.left{
float:left;
width:20%;
height:200px;
background:#DDD
}
.rightright{
float:rightright;
width:30%;
height:80px;
background:#DDD
}
/*清除浮动代码*/
.clearfloat{
clear:both
}
</style><div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">div2</div>원리: 빈 div를 추가하고 CSS로 개선된 Clear:both를 사용하여 부동 소수점을 지워서 상위 div가 자동으로 높이를 얻을 수 있도록 합니다
장점: 간단하고 코드가 적습니다. , 좋은 브라우저 지원, 이상한 문제가 발생하기 쉽지 않습니다
단점: 많은 초보자가 원리를 이해하지 못합니다. 페이지에 플로팅 레이아웃이 많으면 빈 div가 많이 추가되어 사람들이 매우 불편해집니다.
3. 상위 div 정의 의사 클래스: after 및 Zoom
<style type="text/css">
.div1{
background:#000080;
border:1px solid red;
}
.div2{
background:#800080;
border:1px solid red;
height:100px;
margin-top:10px
}
.left{
float:left;
width:20%;
height:200px;
background:#DDD
}
.rightright{
float:rightright;
width:30%;
height:80px;
background:#DDD
}
/*清除浮动代码*/
.clearfloat:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0
}
.clearfloat{
zoom:1
}
</style><div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">div2</div>원리: IE8 이상 및 IE가 아닌 브라우저만 지원합니다. 원칙은 방법 2와 다소 유사합니다. (IE 변환에는 속성이 있습니다) ie6 및 ie7의 플로팅 문제를 해결할 수 있습니다
장점: 좋은 브라우저 지원, 쉽지 않음 이상한 문제가 발생함(현재: Tencent, NetEase, Sina 등과 같은 대규모 웹사이트에서 사용됨)
단점: 코드가 많습니다. , 그리고 많은 초보자들은 원리를 이해하지 못합니다. 주류 브라우저를 활성화하려면 두 줄의 코드를 조합하여 사용해야 합니다.
4. 상위 div 정의 오버플로:hidden
<style type="text/css">
.div1{
background:#000080;
border:1px solid red;
/*解决代码*/
width:98%;
overflow:hidden
}
.div2{
background:#800080;
border:1px solid red;
height:100px;
margin-top:10px;
width:98%
}
.left{
float:left;
width:20%;
height:200px;
background:#DDD
}
.rightright{
float:rightright;
width:30%;
height:80px;
background:#DDD
}
</style><div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">div2</div>원칙: 너비 또는 확대/축소: 1을 정의해야 하며 높이는 정의할 수 없습니다. overflow:hidden를 사용하면 브라우저가 플로팅 영역의 높이를 자동으로 확인합니다
장점 : 간단함, 적은 코드, 우수한 브라우저 지원
단점: 초과된 크기는 숨겨지기 때문에 위치와 함께 사용할 수 없습니다.
동영상 공유 학습: css 동영상 튜토리얼
위 내용은 CSS에서 플로트를 지우는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!