플로트 청소의 방법과 장점 및 단점은 무엇입니까?
- 一个新手원래의
- 2017-09-23 10:23:132168검색
왜 플로트를 클리어해야 하나요?
다음 예시는 요소에 float를 적용한 효과입니다
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<style type="text/css">
.box1 {
width: 100px;
background: #999;
}
.box2 {
width: 100px;
height: 40px;
}
.box3 {
width: 100px;
height: 40px;
background-color: #333;
}
</style></head><body>
<p class="box1">
<p class="box2"></p>
</p>
<p class="box3"></p></body></html>box2에 float: left 속성을 추가한 결과는 다음과 같습니다
그림과 같이 box1이 높이를 설정하지 않았기 때문에 box3이 자동으로 공간을 채웁니다. 이 경우 페이지가 엉망이 됩니다. 따라서 이 float를 지워야 합니다
다음은 float를 지우는 여러 가지 방법입니다
(1)clear:both
floating 요소 아래에 p 태그를 추가하고clear:both 속성
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<style type="text/css">
.box1 {
width: 100px;
background: #999;
}
.clear {
clear: both;
}
.box2 {
width: 100px;
height: 40px;
float: left;
}
.box3 {
width: 100px;
height: 40px;
background-color: #333;
}
</style></head><body>
<p class="box1">
<p class="box2"></p>
<p class="clear"></p>
</p>
<p class="box3"></p></body></html>장점: 간단함, 코드가 적고 브라우저 지원이 좋음
단점: 의미 없는 태그 추가
(2) 오버플로: 숨김
플로팅 요소의 상위 요소에 오버플로: 숨겨진 속성을 추가하여 플로트를 지웁니다.
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<style type="text/css">
.box1 {
width: 100px;
background: #999;
}
.clear {
overflow: hidden;
zoom: 1; /*处理兼容性问题*/
}
.box2 {
width: 100px;
height: 40px;
float: left;
}
.box3 {
width: 100px;
height: 40px;
background-color: #333;
}
</style></head><body>
<p class="box1 clear">
<p class="box2"></p>
</p>
<p class="box3"></p></body></html>장점: 간단하고 코드가 적으며, 좋은 브라우저 지원
단점: 과도한 내용은 숨겨짐
(3) 뒤에 의사 클래스 추가
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<style type="text/css">
.box1 {
width: 100px;
background: #999;
}
.clear:after {
clear: both;
content: "";
display: block;
visibility: hidden;
}
.box2 {
width: 100px;
height: 40px;
float: left;
}
.box3 {
width: 100px;
height: 40px;
background-color: #333;
}
</style></head><body>
<p class="box1 clear">
<p class="box2"></p>
</p>
<p class="box3"></p></body></html> 장점: 좋은 브라우저 지원
단점: 코드가 많다
세 번째 방법은 현재 많은 브라우저에서 사용하는 방법입니다. 따라서 플로트를 지울 때는 이후 의사 클래스를 사용하는 것이 가장 좋습니다
위 내용은 플로트 청소의 방법과 장점 및 단점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.