집 > 기사 > 웹 프론트엔드 > Floating ClearFix 및 Clear를 위한 CSS 사용에 대한 간략한 논의

Floating ClearFix 및 Clear를 위한 CSS 사용에 대한 간략한 논의

高洛峰원래의: 2017-03-17 16:33:511974검색

다음 편집자는 CSS 클리어 플로트(clearfix 및 clear) 사용법에 대해 간략하게 설명합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 에디터와 함께 구경해보세요

이 글은 CSS를 이제 막 이해하기 시작한 아이들을 위해 HTML에서 ClearFix와 Clear를 사용하는 방법을 주로 설명합니다. 여기서는 Clearfix와 Clear의 스타일에 대해 쓰지 않겠습니다.

이 두 클래스의 사용법에 대해 이야기해 보겠습니다. 먼저 예를 살펴보겠습니다.

rree

우리 모두는 float를 사용하면 알려지지 않은 많은 문제가 발생한다는 것을 알고 있습니다. class="demo"의 높이는 내부의 p에 의해 늘어나지 않는 것으로 나타났습니다. 이는 데모 자체에 높이가 없기 때문에 내부의 p가 떠서 문서에서 벗어나기 때문입니다. 물론 데모에 높이를 지정하면 되지만 이는 이 기사의 목적에서 벗어납니다(때때로 우리는 외부 p의 높이가 내부 콘텐츠에 의해 결정되기를 원합니다).

플로팅으로 인한 문제이므로 플로팅을 클리어하면 전문가들이 Overflow:hidden 등 플로팅을 클리어할 수 있는 방법이 많이 있다고 생각합니다. 아래에서는 클리어픽스(clearfix)와 클리어에서 플로트(float)를 지우는 방법을 소개하겠습니다.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8"/>
    <title>如何在html中使用clearfix和clear</title>
    <link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/>
    <style type="text/css">
    .fl{float:left;}   
    .demo{background:#ccc;}   
    .item1{background:#f90;height:100px;width:100px;}   
    .item2{background:#fc0;height:200px;width:100px;}   
    </style>
</head>
<body>
    <p class="demo">
        <p class="fl item1"></p>
        <p class="fl item2"></p>
    </p>
</body>
</html>

clearfix는 주로 플로팅 레이어의 상위 레이어에 사용되는 반면, 클리어는 플로팅 레이어와 플로팅 레이어 사이에 주로 사용되며 동시에 사용되는 것을 확인했습니다. 레벨을 플로팅 레이어로 설정합니다. 상위 레이어의 높이를 확장하려면 끝에 Clear를 배치해야 합니다.

이 두 가지 방법 중 어느 것이 더 좋다고 말하기는 어렵습니다. 구체적인 요구 사항을 구체적으로 처리해야 한다고 말할 수 있습니다.

Floating ClearFix 및 Clear를 위한 CSS 사용에 대한 간략한 논의

관련 기사