CSS에서 플로트를 지우는 방법

CSS에서 부동 소수점을 지우는 방법은 상위 요소에 [overflow:auto]를 설정하는 것입니다. 일단 설정되면 콘텐츠 요소가 잘리고 나머지 요소는 표시되지 않습니다. 빈 태그를 추가하거나 [:after] 의사 요소를 사용하여 부동 소수점을 지울 수도 있습니다.

이 기사의 운영 환경: windows10 시스템, CSS 3, thinkpad t480 컴퓨터.

먼저 플로트를 지우는 목적에 대해 이야기해 보겠습니다. 플로트를 지우는 것은 자체 플로트를 지우는 효과가 아니라, 플로팅 요소 뒤의 요소가 플로트를 받아들이지 않도록 플로트에서 접촉하는 플로트 요소를 청소하는 것입니다. 정상에 따르면 요소의 흐름이 배치됩니다.

이제 부동 소수점을 지우는 세 가지 방법을 소개합니다.

첫 번째 방법:

빈 레이블(div 또는 br 등)을 추가하고 클리어를 통해 다음 요소에서 부동 소수점의 효과를 제거합니다. 진술 영향.

<div class="main_left">.main{float:left;}</div>
<div class="side_left">.side{float:right;}</div>
<!--增加一个空标签-->
<div style="clear:both;"></div>
<div class="footer">.footer</div>

단점: 무의미한 태그를 많이 추가해야 하므로 향후 유지 관리에 해롭습니다. 작은 프로그램이라면 괜찮지만, 큰 프로젝트라면 주의해서 사용하세요.

두 번째 방법: after pseudo-element를 사용하세요

.clearIt { zoom:1; }
.clearIt:before;  
 /*加上before可以防止浏览器顶部的空白崩溃（就是上一个div的margin-bottom和下边的margin-top会发生叠加）*/
 .clearIt:after {
    content:".";
    display:block; 
    height:0;
    visibility:hidden; 
    clear:both; 
}
/*
display:block 使生成的元素以块级元素显示,占满剩余空间;
height:0 避免生成内容破坏原有布局的高度。
visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；
zoom：1 触发IE hasLayout。
*/

세 번째 방법:

상위 요소에 오버플로: 자동 설정

<!--为父元素设置overflow-->
<div class="wrap"  style="overflow:auto;">
<div class="wrap_main_left">.main{float:left;}</div>
<div class="wrap_side_left">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>

상위 요소가 오버플로: 자동을 설정하면 콘텐츠 요소가 요소가 보이지 않습니다.

이 방법의 장점은 구조적, 의미적 문제가 없으며 코드의 양이 매우 적다는 것입니다. 하지만 단점도 매우 심각합니다. 컨텐츠가 늘어나면 자동으로 Wrapping되지 않기 때문에 컨텐츠를 숨기기 쉽고, 오버플로우가 필요한 요소는 표시할 수 없습니다.

사실은 명확합니다. 둘 다 float의 영향을 제거하는 데 사용됩니다. 다른 여러 방법은 콘텐츠를 숨겨 자체 목표를 달성합니다.

관련 학습 영상 공유: css 영상 튜토리얼

위 내용은 CSS에서 플로트를 지우는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!