Css는 부동 소수점을 제거할 수 있습니다. CSS에서 부동 소수점을 제거하는 방법: 1. 상위 컨테이너에서 "overflow:hidden" 스타일을 정의합니다. 2. 끝에 "clear:both" 스타일이 있는 div 또는 p 태그를 추가합니다. 3. 상위 수준 컨테이너는 "overflow:auto" 스타일을 정의합니다.
추천 튜토리얼: CSS 비디오 튜토리얼
플로팅은 레이아웃에 사용되는 기술로, 레이아웃을 용이하게 할 수 있습니다.
1. 플로팅 설정: CSS 속성 부동 소수점: 왼쪽/오른쪽/없음 왼쪽 부동/오른쪽 부동/부동 아님(기본값)
2 부동의 원리:
현재 요소를 일반 흐름에서 꺼내는 것은 부동 상자의 외부 가장자리가 포함 상자 또는 다른 부동 상자의 가장자리와 만날 때까지 왼쪽과 오른쪽으로 이동할 수 있습니다.
3. 플로팅의 영향:
근처 요소의 레이아웃을 변경하여 레이아웃을 혼란스럽게 만듭니다
<style type="text/css"> .div1{background:#000080;border:1px solid red;width:98%;overflow:hidden} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD} </style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div>
<style type="text/css"> .div1{background:#000080;border:1px solid red} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:200px;background:#DDD} .rightright{float:rightright;width:30%;height:80px;background:#DDD} /*清除浮动代码*/ .clearfloat{clear:both} </style>
<div class="div1"> <div class="left">Left</div> <div class="right">Right</div> <div class="clearfloat"></div> </div> <div class="div2"> div2 </div>
<style type="text/css"> .div1{background:#000080;border:1px solid red;height:200px;} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD} </style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div>
.div1{background:#000080;border:1px solid red;width:98%;overflow:auto}
<style type="text/css"> .div1{background:#000080;border:1px solid red;} .left{float:left;width:20%;height:200px;background:#DDD} .right{float:right;width:30%;height:80px;background:#DDD} .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} .clearfloat{zoom:1} </style> <div class="div1 clearfloat"> <div class="left">Left</div> <div class="right">Right</div> </div>
단점:
코드가 많고, 많은 초보자들이 원리를 이해하지 못합니다. 주류 브라우저에서 지원하려면 두 줄의 코드를 조합하여 사용해야 합니다.
제안:
사용을 권장하며, CSS 코드를 줄이기 위해 공개 클래스를 정의하는 것이 좋습니다.
프로그래밍 교육을 방문하세요! !
위 내용은 CSS로 float를 제거할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!