CSS를 사용하는 방법:수레를 지우는 후-CSS 튜토리얼-php.cn

CSS를 사용하는 방법:수레를 지우는 후

青灯夜游

풀어 주다： 2023-01-05 16:12:59

원래의

4687명이 탐색했습니다.

방법: 먼저 "상위 요소: after{content:'';display:block;}" 문을 사용하여 상위 요소 하단에 빈 요소 블록을 삽입하고 표시한 다음 "clear:both;"를 추가합니다. 요소 블록에 대한 스타일 모든 수레가 지워집니다.

CSS를 사용하는 방법:수레를 지우는 후

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

수레를 언제 지워야 하나요? 부유물을 제거하는 방법은 무엇입니까?

1. 요소가 부동된 후 해당 요소는 문서 흐름에서 벗어나 문서 위에 떠 있게 됩니다. CSS에서는 모든 요소가 부동될 수 있습니다. 부동 요소는 요소 유형에 관계없이 블록 수준 상자를 만듭니다.

float는 주로 페이지 레이아웃에 많이 사용되며, 사용 후 float가 지워지지 않으면 문제가 끝없이 발생합니다.

먼저 예를 살펴보겠습니다.

<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>

로그인 후 복사

.outer{ border:1px solid #ccc; background:#fc9; color:#fff; margin:50px auto; padding:50px;}
.div1{ width:80px; height:80px; background:#f00; float:left; }
.div2{ width:80px; height:80px; background:blue; float:left; }
.div3{ width:80px; height:80px; background:sienna; float:left; }

로그인 후 복사

위 그림과 같이 1, 2, 3의 세 가지 요소가 떠다니는 현상입니다.

한번 살펴보겠습니다. 이 세 가지 요소가 뜨지 않으면 어떤 모습일까요?

.outer{ border:1px solid #ccc; background:#fc9; color:#fff; margin:50px auto; padding:50px;}
.div1{ width:80px; height:80px; background:#f00; /*float:left;*/ }
.div2{ width:80px; height:80px; background:blue;/* float:left; */}
.div3{ width:80px; height:80px; background:sienna;/* float:left;*/ }

로그인 후 복사

위 그림과 같이 안쪽 1/2/3 요소가 뜨지 않을 때의 높이는 외부 요소 자동으로 열립니다.

따라서 내부 요소가 부동하면 다음과 같은 효과가 발생합니다.

배경을 표시할 수 없으며, 여백 설정 값을 올바르게 표시할 수 없습니다.

2. float----:after 메서드를 삭제합니다. (참고: 부동 요소의 상위에서 작동)

원리: 부동 요소를 지우는 효과를 얻으려면 요소 내부에 두 개의 요소 블록을 삽입하려면 :after 및 :before를 사용하세요. 구현 원칙은 <div style="max-width:90%"brush:css;toolbar:false;">.outer { zoom:1; } /*为了兼容性，因为ie6/7不能使用伪类，所以加上此行代码。*/ .outer:after { content:'';clear:both;display:block;width:0;height:0;visibility:hidden; }</pre><p><img src="https://img.php.cn/upload/article/000/000/024/ff79fa90327a26c484eac0a86c8aabbe-4.png" alt=""><br></p> <p>其中<code>clear:both;指清除所有浮动；content:' . '；display:block; 对于FF/Chrome/opera/IE8不能缺少，其中content()取值也可以为空。visibility:hidden;">