CSS에서 수레를 지우는 방법은 무엇입니까

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에서 수레를 지우는 방법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!