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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== CSS Layout - float - clear and clearfix ======
<WRAP left notice 80%>
  * description : CSS float - clear and clearfix 
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-15
</WRAP>
<WRAP clear></WRAP>
\\
\\
=====The source of this article==== 
  * [[https://www.w3schools.com/css/css_float_clear.asp|CSS float - clear and clearfix]]
\\

======The clear Property======
''clear'' 속성을 사용하고, 다음 요소를 하단에 위치시키고 싶을 때, ''clear'' 속성을 사용해야 합니다.\\
\\
''clear'' 속성은 플로트 된 요소의 옆에 있는 요소에 적용될 것을 지정합니다.\\
\\
''clear'' 속성은 다음의 값들 중 하나를 가질 수 있습니다.\\
\\
  * ''none'' - 요소는 플로트된 요소들의 좌측 또는 우측 아래에 위치하지 않습니다. 이것이 기본 값입니다. 
  * ''left'' - 요소는 좌측으로 플로트된 요소들 아래로 위치하게 됩니다.
  * ''right'' - 요쇼는 우측으로 플로트된 요소들 아래로 위치하게 됩니다.
  * ''both'' - 요소는 좌측과 우측 양쪽으로 플로트된 요소들의 아래에 위치하게 됩니다.
  * ''inherit'' - 요소는 부모 요소의 %%clear%% 값을 상속 받습니다.
\\
%%floats%% 속성을 제거할 때, %%clear%% 속성을 %%float%% 속성에 일치시켜야 합니다:\\ 
요소가 좌측으로 플르토 될 경우, 좌측으로 지워야 합니다.\\ 
플로트 된 요소가 계속 플로트 되지만, 플로트 속성이 제거된 요소는 웹 페이지에서 그 아래에 표시됩니다.\\
\\

==== Example ====
하기의 예제는 좌측으로의 플로트 속성을 제거합니다.\\ 
%%<div2>%% 요소가 좌측으로 플로트 된 %%<div1>%% 요소 아래에 위치된다는 것을 의미합니다.\\
<code css>
<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>
</code>

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

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

{{tag>오션, CSS float, clear }}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
