CSS에서 부동 소수점을 지우는 네 가지 방법이 있습니다: [clear:both], 의사 요소 뒤, 높이를 상위로 설정, [overflow:hidden]을 상위로 설정. 권장되는 방법은 이후 의사 요소를 사용하여 플로트를 지우는 것입니다.
이 기사의 운영 환경: windows10 시스템, CSS 3, thinkpad t480 컴퓨터.
CSS에서 부동 소수점을 지우는 네 가지 방법은 다음과 같습니다.
1. 클리어: 둘 다 부동 소수점 지우기
HTML 코드:
<div class="container"> <div class="left">left浮动</div> <div class="right">right浮动</div> <div class="clear"></div> </div>
CSS 코드:
<style> .container{ margin:40px auto; width:400px; border:5px solid grey; background: yellow;/*背景正常显示*/ } .left{float:left;width:200px;height:100px;border: 1px solid red;} .right{float:right;width:196px;height:100px;border: 1px solid red;background: blue;} /*边框能撑开*/ .clear{clear:both;} </style>
결과:
부모 배경과 테두리는 다음과 같습니다. 또한 정상적으로 표시되고 늘어납니다. 장점은 사용하기 쉽지만 단점은 빈 HTML 태그가 더 많이 추가된다는 것입니다
2. 플로팅을 지우려면 뒤에 의사 요소를 사용하세요(권장)
장점: 추가 태그가 없습니다. 필요하며 브라우저 호환성이 좋으며 현재 사용됩니다. 기업에서 사용하는 부동소수점을 지우는 가장 일반적인 방법 중 하나입니다.
단점: ie6-7은 의사 요소를 지원하지 않습니다. 그런 다음 Zoom:1을 사용하여 hasLayout을 트리거합니다.
HTML 코드:
<div class="container"> <div class="left">left浮动</div> <div class="right">right浮动</div> </div>
(학습 동영상 공유: css 동영상 튜토리얼)
CSS 코드:
<style> .container{ width:400px; border:5px solid grey; background: yellow; } .left{float:left;width:200px;height:100px;border: 1px solid red;} .right{float:right;width:196px;height:100px;border: 1px solid red;background: blue;} .container:after{ content:""; display: block; clear:both; } .container{ *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/ } </style>
결과는 다음과 같습니다.
3. 일반적으로 부모 설정에 적합한 CSS 높이를 설정합니다. 높이는 설정하기 전에 콘텐츠 높이를 결정할 수 있어야 합니다. 여기서는 콘텐츠 높이가 100PX + 상단 및 하단 테두리가 2px이므로 특정 상위 높이가 102px임을 알 수 있습니다.
위의 부동 단점 및 부작용 코드에서 style.container 클래스에 상위 높이를 추가하기만 하면 됩니다. 여기서는 프레젠테이션을 너무 많이 하지 않을 거예요. 단점도 매우 분명합니다. 이런 방식으로 플로트를 지우는 것은 권장되지 않습니다.
4. 상위 요소에 Overflow:hidden을 설정합니다.
원리: 상위 요소는 Overflow:hidden을 정의합니다. 이때 브라우저는 부동 영역의 높이를 자동으로 확인합니다.
장점: 간단하며 추가할 필요가 없습니다. 새로운 태그;
단점: 초과된 크기는 숨겨지기 때문에 위치와 함께 사용할 수 없습니다.
코드도 부작용을 기반으로 하며, 컨테이너에 Overflow:hidden 또는 auto를 추가하면 명확한 부동 효과를 얻을 수 있습니다. 결과는 다음과 같습니다.
뛰어난 단점: 매우 완벽하지만 구별하기 어려운 속성이 너무 많습니다.관련 권장 사항:
CSS 튜토리얼위 내용은 CSS에서 수레를 지우는 방법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!