CSS에서 수레를 지우는 방법은 무엇입니까-CSS 튜토리얼-php.cn

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

王林

풀어 주다： 2023-01-03 09:26:22

원래의

8768명이 탐색했습니다.

CSS에서 부동 소수점을 지우는 네 가지 방법이 있습니다: [clear:both], 의사 요소 뒤, 높이를 상위로 설정, [overflow:hidden]을 상위로 설정. 권장되는 방법은 이후 의사 요소를 사용하여 플로트를 지우는 것입니다.

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

이 기사의 운영 환경: 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>

로그인 후 복사

결과:

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

부모 배경과 테두리는 다음과 같습니다. 또한 정상적으로 표시되고 늘어납니다. 장점은 사용하기 쉽지만 단점은 빈 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>

로그인 후 복사

결과는 다음과 같습니다.

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