CSS 플로트를 지우는 방법

php中世界最好的语言원래의: 2018-03-20 13:59:431539검색

이번에는 cssfloating을 클리어하는 방법과 CSS플로팅을 클리어할 때의 주의사항은 무엇인지 알아보겠습니다. 다음은 실제 사례입니다.

먼저, 우리는 왜 떠야 하는가

왜 떠야 하는지, 왜 float를 지워야 하는지, 그리고 float를 지우는 방법. 웹 페이지를 레이아웃할 때 요소를 나란히 표시해야 하는 경우가 있습니다. 플로팅을 선택하지 않으면 해당 블록 요소가 한 줄씩 표시되어 공간을 차지하고 매우 나쁜 사용자 경험을 유발합니다.

다음은 플로팅이 없는 요소 코드입니다

<p class=“box”>
        <p class=“box01”></p>
        <p class=“box02”></p>
    </p>
 .box{
    background: #000;
}
.box01{
    width: 100px;
    height: 100px;
    background: red;
}
.box02{
    width: 100px;
    height: 100px;
    background: yellow;
}

그림 1-1은 플로팅이 없는 요소이고, 그림 1-2는 외부 컨테이너의 너비와 높이입니다. 이에 대한 목적은 아래에서 언급하겠습니다

요소에 float를 추가하면 그림 1-3과 같이 레이아웃이 변경되고 두 개의 p가 나란히 표시됩니다. 놀랍지 않나요? 하하

그런데 배경색이 있다는 것을 눈치채셨나요? p의 가장 바깥쪽 레이어가 사라졌나요? 요소에서 나오는 문서 흐름이 가장 바깥쪽 p의 공간을 차지하지 않기 때문에 높이도 0이 됩니다. 이때 float를 지우고 자식의 붕괴 효과를 지워야 합니다. 요소의 상위 요소에 대한 부동 소수점입니다. (여기서 플로트를 지우는 것은 하위 요소에 대해 이전에 설정된 플로트를 의미하지 않습니다. 둘째, 플로트를 지우는 것이 상위 요소에 미치는 영향을 나타냅니다. 모두가 이해할 수 있기를 바랍니다.)

두 부동 소수점을 지우는 세 가지 방법이 있습니다:

첫 번째 방법:clear:both;

부모 요소 내부에 투명과 유사한 p(box01 및 box02와 동일한 레벨)를 추가한 다음 추가합니다. this 클래스에 속성 값을 추가하여 float를 지웁니다. 다음은 그림 1-3

<p class=“box”>
        <p class=“box01”></p>
        <p class=“box02”></p>
        <p class=“clear”></p>
    </p>
   .box{
    background: #000;
}
.clear{
    clear: both;
}
.box01{
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.box02{
    width: 100px;
    height: 100px;
    background: yellow;
    float: left;
}

과 같이 float를 지운 후의 코드와 효과입니다. 나오고 상위 요소의 높이는 정확히 100px입니다. 이는 하위 요소에 의해 열려 있습니다.

두 번째 유형: overflow: Hidden;

Add Overflow: Hidden; 다음 CSS 코드와 같이 부동소수점을 지울 수도 있지만 이 방법은 Overflow: Hidden을 의미하지 않습니다. 초과분을 숨기려면 제대로 처리하지 않으면 여전히 페이지에 문제가 발생할 수 있습니다.

.box{
        background: #000;
        overflow: hidden;
    }

세 번째 방법: clearfix;

페이지에서 bootstrap 프레임워크를 사용하는 경우 CSS 파일을 도입하고 상위 요소에 Clearfix를 추가하여 플로트를 삭제합니다. 프로그래머들 사이에서 가장 인기 있는 방법 중 하나는 클래스를 추가하는 것이고, Clear:Both는 페이지에 추가 p를 추가하는 것입니다. 따라서 편집자는 모든 사람에게 세 번째 방법을 권장합니다.

페이지에서 부트스트랩 프레임워크를 사용하지 않는 경우 초보자가 참조할 수 있는 소스 코드도 있습니다.

<p class=“box clearfix”>
        <p class=“box01”></p>
        <p class=“box02”></p>
        <p class=“clear”></p>
    </p>
 .box{
    background: #000;
}
.clearfix:before,.clearfix:after{
    content: ”;
    display: table;//可以很好的解决浏览器兼容问题
}
.clearfix:after{
    clear: both;
}
.box01{
    width: 100px;
    height: 100px;
    background: red;
    float: left;
}
.box02{
    width: 100px;
    height: 100px;
    background: yellow;
    float: left;
}

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!