차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:css:css_note:css_float-clear [2021/03/15 17:38]
emblim98 만듦
+++ wiki:css:css_note:css_float-clear [2023/01/13 18:44] (현재)
@@ 줄 9: / 줄 9: @@
 \\
 \\
-=====Source of the article====
+=====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'' 속성은 하기의 값들 중 하나를 가질 수 있습니다.\\
+''clear'' 속성은 플로트 된 요소의 옆에 있는 요소에 적용될 것을 지정합니다.\\
-  * none - 양쪽에 플로팅 요소를 허용합니다. 이것이 기본 값입니다.
-  * left - 좌측에 플로팅 요소가 허용되지 않습니다.
-  * right - 우측에 플로팅 요소가 허용되지 않습니다.
-  * both - 좌측 또는 우측에 플로팅 요소가 허용되지 않습니다.
-  * inherit - 요소는 부모의 명확한 값을 상속 받습니다.
 \\
-''clear''속성을 사용하는 가장 일반적인 방법은 요소에 ''float''속성을 사용한 이후입니다.\\
+''clear'' 속성은 다음의 값들 중 하나를 가질 수 있습니다.\\
 \\
-float를 지울 때 clear를 float에 일치시켜야 합니다: 요소가 좌측으로 float될 경우, 좌측으로 지워야 합니다. float된 요소가 계속 float되지만, 지워진 요소는 웹 페이지에서 그 아래에 표시됩니다.\\
+  * ''none'' - 요소는 플로트된 요소들의 좌측 또는 우측 아래에 위치하지 않습니다. 이것이 기본 값입니다.
+  * ''left'' - 요소는 좌측으로 플로트된 요소들 아래로 위치하게 됩니다.
+  * ''right'' - 요쇼는 우측으로 플로트된 요소들 아래로 위치하게 됩니다.
+  * ''both'' - 요소는 좌측과 우측 양쪽으로 플로트된 요소들의 아래에 위치하게 됩니다.
+  * ''inherit'' - 요소는 부모 요소의 %%clear%% 값을 상속 받습니다.
+\\
+%%floats%% 속성을 제거할 때, %%clear%% 속성을 %%float%% 속성에 일치시켜야 합니다:\\
+요소가 좌측으로 플르토 될 경우, 좌측으로 지워야 합니다.\\
+플로트 된 요소가 계속 플로트 되지만, 플로트 속성이 제거된 요소는 웹 페이지에서 그 아래에 표시됩니다.\\
 \\
-하기의 예제는 좌측으로의 float를 지웁니다. .div의 좌측에 플로팅 요소가 허용되지 않음을 의미합니다.\\
-====예제====
-<code html>
+==== 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

사용자 도구

사이트 도구

차이

문서 도구