CSS Layout - float - clear and clearfix

description : CSS float - clear and clearfix
author : 오션
email : shlim@repia.com
lastupdate : 2021-03-15

The source of this article

CSS float - clear and clearfix

The clear Property

clear 속성을 사용하고, 다음 요소를 하단에 위치시키고 싶을 때, clear 속성을 사용해야 합니다.

clear 속성은 플로트 된 요소의 옆에 있는 요소에 적용될 것을 지정합니다.

clear 속성은 다음의 값들 중 하나를 가질 수 있습니다.

none - 요소는 플로트된 요소들의 좌측 또는 우측 아래에 위치하지 않습니다. 이것이 기본 값입니다.
left - 요소는 좌측으로 플로트된 요소들 아래로 위치하게 됩니다.
right - 요쇼는 우측으로 플로트된 요소들 아래로 위치하게 됩니다.
both - 요소는 좌측과 우측 양쪽으로 플로트된 요소들의 아래에 위치하게 됩니다.
inherit - 요소는 부모 요소의 clear 값을 상속 받습니다.

floats 속성을 제거할 때, clear 속성을 float 속성에 일치시켜야 합니다:
요소가 좌측으로 플르토 될 경우, 좌측으로 지워야 합니다.
플로트 된 요소가 계속 플로트 되지만, 플로트 속성이 제거된 요소는 웹 페이지에서 그 아래에 표시됩니다.

Example

하기의 예제는 좌측으로의 플로트 속성을 제거합니다.
<div2> 요소가 좌측으로 플로트 된 <div1> 요소 아래에 위치된다는 것을 의미합니다.

<style>
      .div1 {
        float: left;
        padding: 10px;
        border: 3px solid #73ad21;
      }
 
      .div2 {
        padding: 10px;
        border: 3px solid red;
      }
 
      .div3 {
        border: 3px solid #72a;
        padding: 10px;
        float: left;
      }
 
      .div4 {
        border: 3px solid green;
        padding: 10px;
        clear: left;
      }
    </style>
  </head>
  <body>
    <h2>Without clear</h2>
    <div class="div1">div1</div>
    <div class="div2">
      div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the
      left, the text in div2 flows around div1.
    </div>
    <br /><br />
 
    <h2>With clear</h2>
    <div class="div3">div3</div>
    <div class="div4">
      div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears
      elements floated to the left. You can also clear "right" and "both".
    </div>
  </body>

The clearfix Hack

플로트 된 요소가 플로트 된 요소를 포함하는 요소보다 더 큰 경우, 컨테이너 외부로 넘치게 됩니다(overflow).
이 문제를 해결하기 위해, clearfix hack을 추가할 수 있습니다.

예제

<style>
      div {
        border: 3px solid #4caf50;
        padding: 5px;
      }
 
      .img1 {
        float: right;
      }
 
      .img2 {
        float: right;
      }
 
      .clearfix {
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <h2>Without Clearfix</h2>
 
    <p>
      This image is floated to the right. It is also taller than the element containing it, so it
      overflows outside of its container:
    </p>
 
    <div>
      <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170" />
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit...
    </div>
 
    <h2>With Clearfix</h2>
    <p>
      We can fix this by adding a clearfix class with overflow: auto; to the containing element:
    </p>
 
    <div class="clearfix">
      <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170" />
      Lorem ipsum dolor, sit amet consectetur adipisicing elit...
    </div>
  </body>

overflow: auto clearfix는 마진과 패딩을 제어할 수 있는 한 잘 작동합니다.(그렇지 않을 경우, 스크롤 막대가 표시될 수 있슴). 그러나 새롭고 현대적인 clearfix hack은 사용하기에 더 안전하며, 대부분의 웹페이지에서 아래의 코드가 사용됩니다.

Example

 <style>
      div {
        border: 3px solid #4caf50;
        padding: 5px;
      }
 
      .img1 {
        float: right;
      }
 
      .img2 {
        float: right;
      }
 
      .clearfix::after {
        content: '';
        clear: both;
        display: table;
      }
    </style>
  </head>
  <body>
    <h2>Without Clearfix</h2>
 
    <p>
      This image is floated to the right. It is also taller than the element containing it, so it
      overflows outside of its container:
    </p>
 
    <div>
      <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170" />
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit...
    </div>
 
    <h2>With New Modern Clearfix</h2>
    <p>Add the clearfix hack to the containing element, to fix this problem:</p>
 
    <div class="clearfix">
      <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170" />
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt maxime rerum iste error.
    </div>
  </body>

오션,, CSS, float,, clear

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

목차

CSS Layout - float - clear and clearfix

The source of this article

The clear Property

Example

The clearfix Hack

예제

Example

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

목차

CSS Layout - float - clear and clearfix

The source of this article

The clear Property

Example

The clearfix Hack

예제

Example

문서 도구