CSS3에서 부동 소수점을 지우는 코드는 무엇입니까?
- WBOY원래의
- 2022-04-11 18:14:174599검색
코드는 다음과 같습니다. 1. ".clear{clear:both}", 요소가 왼쪽과 오른쪽으로 부동하지 않도록 규정합니다. 2. "overflow:auto", 잘라낼 내용을 클리어 부동으로 설정합니다. Element: after{display:table; }", 블록 수준 테이블에 표시할 요소를 설정하고 남은 공간이 채워지면 float를 지웁니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
css3에서 부동소수점을 지우는 코드는 무엇입니까?
방법 1: 클리어 속성이 있는 빈 요소 사용
빈 태그를 사용하여 부동소수점 지우기: 상위 요소 내의 모든 부동소수점 요소 뒤에 빈 요소를 추가합니다. Cleared 레이블(이론적으로는 어떤 레이블이든 가능하지만 일반적으로 dc6dce4a544fdca2df29d5ac0ea9906b 및 e388a4556c0f65e1904146cc1a846bee에 사용됨)은 부동 소수점을 지우고 이에 대한 CSS 코드clear:both를 정의합니다.
코드 예:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{
width: 500px;
margin: 50px auto;
background-color: #CCCCCC;
}
.left{
width: 100px;
height: 100px;
float: left;
background-color: #21B4BB;
}
.right{
width: 100px;
height: 50px;
float: right;
background-color: #21B4BB;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="demo">
<div class="left">left</div>
<div class="right">right</div>
<div class="clear"></div>
</div>
</body>
</html>장점: 간단하고 코드가 적으며 브라우저 호환성이 좋습니다.
단점: 의미 없는 HTML 요소를 많이 추가해야 하고, 코드가 충분히 우아하지 않으며, 나중에 유지 관리가 쉽지 않습니다.
방법 2: CSS의 오버플로 속성을 사용합니다.
플로트를 지우려면 오버플로를 사용하세요. 플로트를 지워야 하는 요소에 CSS 코드 Overflow:auto 또는 Overflow:hidden을 정의하면 됩니다.
코드 예시:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{
width: 500px;
margin: 50px auto;
background-color: #CCCCCC;
overflow:hidden
}
.left{
width: 100px;
height: 100px;
float: left;
background-color: #21B4BB;
}
.right{
width: 100px;
height: 50px;
float: right;
background-color: #21B4BB;
}
</style>
</head>
<body>
<div class="demo">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>장점: 구조적, 의미적 문제가 없으며, 코드의 양이 매우 적습니다.
단점: 내용이 늘어나면 자동으로 줄바꿈이 되지 않아 내용이 엉키기 쉽습니다. 숨겨야 하고 오버플로가 필요한 요소는 표시할 수 없습니다
방법 3: CSS의 :after 의사 요소를 사용하세요
상위 요소에 :after 의사 요소를 사용하고 디스플레이:테이블을 설정하세요.
display:table은 생성된 요소가 블록 수준 테이블에 표시되어 나머지 공간을 차지하도록 합니다.
콘텐츠를 통해 마지막 요소로 콘텐츠를 생성합니다. 콘텐츠의 콘텐츠는 무엇이든 가능합니다. 클래식 CSS는 콘텐츠: "."입니다. 일부 버전에서는 콘텐츠의 콘텐츠가 비어 있을 수 있습니다.
코드 예:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{
width: 500px;
margin: 50px auto;
background-color: #CCCCCC;
*zoom: 1;
}
.demo:after {
content: " ";
display: table;
clear: both;
}
.left{
width: 100px;
height: 100px;
float: left;
background-color: #21B4BB;
}
.right{
width: 100px;
height: 50px;
float: right;
background-color: #21B4BB;
}
</style>
</head>
<body>
<div class="demo">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>단점: 최신 브라우저에 적합, IE6/7을 지원하지 않음, *zoom: 1은 IE6/7과 호환됨
(동영상 공유 학습: css 동영상 튜토리얼)
위 내용은 CSS3에서 부동 소수점을 지우는 코드는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!