POTATO THAT WANT TO BE HUMAN

[CSS] float를 취소하기 위한 clearfix 이용하기 본문

FRONTEND/CSS

[CSS] float를 취소하기 위한 clearfix 이용하기

녜힝 2022. 5. 8. 01:51
반응형

CSS에서 자식요소에 모두 flaot를 적용하게 되면 모든 자식요소가 뜨게 되므로 부모요소의 높이는 0이 된다.

이 현상을 방지하기 위한 다양한 방법이 있습니다.

1. 부모요소의 높이를 지정해줍니다.

2. overflow: hidden 속성을 이용합니다.

3. 가상클래스를 이용해 clear: both 속성을 줍니다. (clearfix)

 

이번 글에서는 3번째 방법인 clearfix에 대해 설명하겠습니다.

 

 

먼저 가상클래스가 없다는 가정하에,

4개의 box에서 3개의 box만 float가 되는 경우에 대해 살펴보겠습니다.

 

<head>
    <meta charset="UTF-8">
    <title>Float-clearfix</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            font-size: 24px;
            font-weight: 700;
            text-align: center;
            line-height: 200px;
            margin: 30px;
        }
        .box1, .box2, .box3 {
            float: left;
        }
        .box4 {
            border: 3px solid blue;
        }
    </style>
</head>
<body>
    <div class="box1">1번 박스</div>
    <div class="box2">2번 박스</div>
    <div class="box3">3번 박스</div>
    <div class="box4">4번 박스</div>
</body>

위 예제에서는 마지막 4번 box를 제외한 1, 2, 3번 box에 float: left; 를 적용하였습니다.

결과는 다음과 같습니다.

4번 요소는 float 되지 않았지만 1, 2, 3번 요소가 모두 float 되었기 때문에 content를 제외한 4번 box가 위로 올라갔습니다. 이 경우 4번 box에 clear속성을 추가하면 float를 취소하고 4번 box를 원래 원하던 위치에 오도록 할 수 있습니다.

 

<head>
    <meta charset="UTF-8">
    <title>Float-clearfix</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            font-size: 24px;
            font-weight: 700;
            text-align: center;
            line-height: 200px;
            margin: 30px;
        }
        .box1, .box2, .box3 {
            float: left;
        }
        .box4 {
            border: 3px solid blue;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1">1번 박스</div>
    <div class="box2">2번 박스</div>
    <div class="box3">3번 박스</div>
    <div class="box4">4번 박스</div>
</body>

box4에 clear: both; 속성을 적용했을 때, 4번 box가 위로 가지않고 원래 위치에 있는 것을 확인할 수 있습니다.

 

하지만 단지 float를 취소시키기 위해 새로운 요소를 만드는 것은 html에서 효율적이지 않습니다.

여기서 clear 속성과 가상요소를 함께 이용하면 불필요한 요소를 만들지 않고도 float를 취소시킬 수 있습니다.

 

box를 감싸는 부모 요소를 만들고, 그 부모 요소에서 가상요소 ::after을 사용하여 보이지 않는 마지막 요소를 생성합니다.  ::after 가상요소의 content는 아무것도 지정하지 않고 dispaly를 block으로 지정해줍니다.

(이때 안전하게 하기 위해 widht와 height를 0으로 지정해줍니다.)

 

그 가상요소에 clear: both; 속성을 지정해줍니다.

이 경우, 부모 요소의 마지막 요소의 content는 없지만 clear: both; 를 지정해줌으로써 부모요소의 높이를 잡을 수 있게 되고, 높이가 0이 되지 않기 때문에 다음으로 오게 되는 요소 또한 원래 위치에 자리잡게 됩니다.

 

<head>
    <meta charset="UTF-8">
    <title>Float-clearfix</title>
    <style>
        .container {
            border: 3px solid blue;
        }
        .container>div {
            float: left;
            width: 200px;
            height: 200px;
            border: 1px solid red;
            font-size: 24px;
            font-weight: 700;
            text-align: center;
            line-height: 200px;
            margin: 30px;
        }
        .container::after {
            content: '';
            display: block;
            width: 0;
            height: 0;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1">1번 박스</div>
        <div class="box2">2번 박스</div>
        <div class="box3">3번 박스</div>
        <div class="box4">4번 박스</div>
    </div>
</body>

.container 에 ::after 로 가상요소를 추가하였습니다. 추가한 가상요소에 clear: both; 속성을 추가하였더니 아래와 같이 부모요소에도 높이가 잡혀 float가 취소될 수 있었습니다.

 

 

 

float 사용 시 가상요소를 이용해 float를 취소하는 경우가 많기 때문에 따로 클래스를 지정하고 스타일을 정해둔 뒤, 

float를 지정하게 될 요소의 부모요소에 해당 클래스를 추가하는 경우가 많습니다. (class name 을 보통 clearfix, 혹은 cf로 작명합니다.)

반응형

'FRONTEND > CSS' 카테고리의 다른 글

[CSS] 형제 선택자 + , ~ 사용법  (0) 2022.05.12
[CSS] box-sizing - 테두리 영역의 크기를 결정하는 속성  (0) 2022.05.10
[CSS] :nth-child()와 :nth-of-type()  (0) 2022.05.05
[CSS] text-indent (텍스트 들여쓰기, 내어쓰기)  (0) 2022.05.03
[CSS] 미디어쿼리(Media Query) 사용하기 - 반응형웹 만들기  (0) 2022.04.21
'FRONTEND/CSS' Related Articles more
Comments