집 >웹 프론트엔드 >CSS 튜토리얼 >CSS 부동 소수점을 지우는 방법 요약

CSS 부동 소수점을 지우는 방법 요약

小云云원래의: 2018-01-20 09:25:091338검색

이 글에서는 주로 CSS 플로팅을 클리어하는 세 가지 방법을 요약해서 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

먼저, 왜 플로팅을 할까요?

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

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

<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의 배경색? 더 이상 높이도 0이 되었습니다. 왜냐하면 요소에서 나오는 문서 흐름이 가장 바깥쪽 p의 공간을 차지하지 않기 때문입니다. 이때 플로트를 지우고 붕괴 효과를 지워야 합니다. 상위 요소에 대한 하위 요소의 부동 소수점입니다. (여기서 플로트를 지우는 것은 하위 요소에 대해 이전에 설정된 플로트를 의미하지 않습니다. 둘째, 플로트를 지우는 것이 상위 요소에 미치는 영향을 나타냅니다. 모두가 이해할 수 있기를 바랍니다.)

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

첫 번째 방법:clear:both;

부모 요소 내부에 투명과 유사한 p(box01 및 box02와 동일한 레벨)를 추가한 다음 추가합니다. this 클래스는 속성 값인 양쪽을 추가하여 부동 소수점을 지울 수 있습니다. 그림 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;
}

배경색을 볼 수 있습니다. 나오고, 상위 요소의 높이는 양수입니다. 100px이며 하위 요소에 의해 확장됩니다.

두 번째 유형: Overflow: Hidden;

Add Overflow: Hidden은 다음 CSS 코드와 같이 부동소수점을 지울 수도 있지만 이 방법은 권장되지 않습니다. 초과된 부분을 잘 처리하지 않으면 여전히 페이지에 문제가 발생할 수 있습니다.

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

세 번째 방법: Clearfix;

페이지에서 부트스트랩 프레임워크를 사용하는 경우 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;
}

다들 배워보셨나요? 도움이 필요한 친구들은 빨리 모아주세요.

CSS 부동 소수점을 지우는 방법 요약

관련 기사