플로트 청소의 방법과 장점 및 단점은 무엇입니까?-JS 튜토리얼-php.cn

플로트 청소의 방법과 장점 및 단점은 무엇입니까?

一个新手

풀어 주다： 2017-09-23 10:23:13

원래의

2192명이 탐색했습니다.

왜 플로트를 클리어해야 하나요?

다음 예시는 요소에 float를 적용한 효과입니다

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <style type="text/css">
        .box1 {            
        width: 100px;            
        background: #999;        
        }
        .box2 {            
        width: 100px;            
        height: 40px;        
        }
        .box3 {            
        width: 100px;            
        height: 40px;            
        background-color: #333;        
        }
    </style></head><body>
    <p class="box1">
        <p class="box2"></p>
    </p>
    <p class="box3"></p></body></html>

로그인 후 복사

box2에 float: left 속성을 추가한 결과는 다음과 같습니다

그림과 같이 box1이 높이를 설정하지 않았기 때문에 box3이 자동으로 공간을 채웁니다. 이 경우 페이지가 엉망이 됩니다. 따라서 이 float를 지워야 합니다

다음은 float를 지우는 여러 가지 방법입니다

(1)clear:both

floating 요소 아래에 p 태그를 추가하고clear:both 속성

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <style type="text/css">
        .box1 {            
        width: 100px;            
        background: #999;        
        }
        .clear {            
        clear: both;        
        }
        .box2 {            
        width: 100px;            
        height: 40px;            
        float: left;        
        }
        .box3 {            
        width: 100px;            
        height: 40px;            
        background-color: #333;        
        }
    </style></head><body>
    <p class="box1">
        <p class="box2"></p>
        <p class="clear"></p>
    </p>
    <p class="box3"></p></body></html>

로그인 후 복사

장점: 간단함, 코드가 적고 브라우저 지원이 좋음
단점: 의미 없는 태그 추가

(2) 오버플로: 숨김

플로팅 요소의 상위 요소에 오버플로: 숨겨진 속성을 추가하여 플로트를 지웁니다.

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <style type="text/css">
        .box1 {            
        width: 100px;            
        background: #999;        
        }
        .clear {            
        overflow: hidden;            
        zoom: 1;   /*处理兼容性问题*/
        }
        .box2 {            
        width: 100px;            
        height: 40px;            
        float: left;        
        }
        .box3 {            
        width: 100px;            
        height: 40px;            
        background-color: #333;        
        }
    </style></head><body>
    <p class="box1 clear">
        <p class="box2"></p>
    </p>
    <p class="box3"></p></body></html>

로그인 후 복사

장점: 간단하고 코드가 적으며, 좋은 브라우저 지원
단점: 과도한 내용은 숨겨짐

(3) 뒤에 의사 클래스 추가

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <style type="text/css">
        .box1 {            
        width: 100px;            
         background: #999;        
         }
        .clear:after {            
        clear: both;            
        content: "";            
        display: block;     
         visibility: hidden;        
         }
        .box2 {            
        width: 100px;            
        height: 40px;            
        float: left;        
        }
        .box3 {            
        width: 100px;            
        height: 40px;            
        background-color: #333;        
        }
    </style></head><body>
    <p class="box1 clear">
        <p class="box2"></p>
    </p>
    <p class="box3"></p></body></html>

로그인 후 복사

장점: 좋은 브라우저 지원
단점: 코드가 많다

세 번째 방법은 현재 많은 브라우저에서 사용하는 방법입니다. 따라서 플로트를 지울 때는 이후 의사 클래스를 사용하는 것이 가장 좋습니다

위 내용은 플로트 청소의 방법과 장점 및 단점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!