차이

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

--- wiki:css:css_note:css_float-clear [2021/07/26 15:19]
emblim98
+++ wiki:css:css_note:css_float-clear [2023/01/13 18:44] (현재)
@@ 줄 77: / 줄 77: @@
   </body>
 </code>
-\\
-\\
+======The clearfix Hack======
-=====The clearfix Hack=====
+플로트 된 요소가 플로트 된 요소를 포함하는 요소보다 더 큰 경우, 컨테이너 외부로 __넘치게 됩니다(overflow)__.\\
-어떤 한 요소가 자신을 포함하고 있는 요소보다 크고 float된 경우, 컨테이너 외부로 넘치게 됩니다.\\
+이 문제를 해결하기 위해, clearfix hack을 추가할 수 있습니다.\\
-그리고 나서, 이 문제를 해결하기 위해, 요소를 포함하는 것에 ''overflow: auato''속성을 추가할 수 있습니다.\\
 ====예제====
-<code html>
+<code css>
-<!DOCTYPE html>
+<style>
-<html lang="en">
+      div {
+        border: 3px solid #4caf50;
+        padding: 5px;
+      }
-<head>
+      .img1 {
-    <meta charset="UTF-8">
+        float: right;
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+      }
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Clearfix</title>
-    <style>
-        div {
-            border: 3px solid green;
-            padding: 5px;
-        }
-        .img1 {
+      .img2 {
-            float: right;
+        float: right;
-        }
+      }
-        .clearfix {
+      .clearfix {
-            overflow: auto;
+        overflow: auto;
-        }
+      }
-        .img2 {
-            float: right;
-        }
     </style>
-</head>
+  </head>
+  <body>
-<body>
+    <h2>Without Clearfix</h2>
-    <h2>Clearfix</h2>
     <p>
-        In this example, the image is taller than the element containing it, and it is floated, so it overflows outsie of its container:
+      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">
+      <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170" />
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
+      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit...
     </div>
-    <p style="clear:right">
+    <h2>With Clearfix</h2>
-        Add a clearfix class with overflow: auto; to the containing element, to fix this problem:
+    <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">
+      <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170" />
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
+      Lorem ipsum dolor, sit amet consectetur adipisicing elit...
     </div>
+  </body>
-</body>
-</html>
 </code>
 \\
-''overflow: auto'' clearfix는 마진과 패딩을 제어할 수 있는 한 잘 작동합니다.(그렇지 않을 경우, 스크롤 막대가 표시될 수 있슴). 그러나 새롭고 현대적인 clearfix hack은 사용하기에 더 안전하며, 대부분의 웹페이지에서 하기의 코ㅡ가 사용됩니다.\\
+''overflow: auto'' clearfix는 마진과 패딩을 제어할 수 있는 한 잘 작동합니다.(그렇지 않을 경우, 스크롤 막대가 표시될 수 있슴). 그러나 새롭고 현대적인 clearfix hack은 사용하기에 더 안전하며, 대부분의 웹페이지에서 아래의 코드가 사용됩니다.\\
 \\
-====예제====
+==== Example ====
-<code html>
+<code css>
-<!DOCTYPE html>
+ <style>
-<html lang="en">
+      div {
+        border: 3px solid #4caf50;
+        padding: 5px;
+      }
-<head>
+      .img1 {
-    <meta charset="UTF-8">
+        float: right;
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+      }
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Clearfix</title>
-    <style>
-        div {
-            border: 3px solid green;
-            padding: 5px;
-        }
-        .img1 {
+      .img2 {
-            float: right;
+        float: right;
-        }
+      }
-        .clearfix::after {
+      .clearfix::after {
-            content: "";
+        content: '';
-            clear: both;
+        clear: both;
-            display: table;
+        display: table;
-        }
+      }
-        .img2 {
-            float: right;
-        }
     </style>
-</head>
+  </head>
+  <body>
-<body>
+    <h2>Without Clearfix</h2>
     <p>
-        In this example, the image is taller than the element containing it, and it is floated, so it overflows outsie of its container:
+      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>
-        <h2>Without Clearfix</h2>
+      <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170" />
-        <img class="img1" src="pineapple.jpg" alt="pineapple" width="170" height="170">
+      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit...
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
     </div>
-    <p style="clear:right">
+    <h2>With New Modern Clearfix</h2>
-        Add a clearfix class with overflow: auto; to the containing element, to fix this problem:
+    <p>Add the clearfix hack to the containing element, to fix this problem:</p>
-    </p>
     <div class="clearfix">
-        <img class="img2" src="pineapple.jpg" alt="pineapple" width="170" height="170">
+      <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170" />
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt maxime rerum iste error.
     </div>
+  </body>
-</body>
-</html>
 </code>
 {{tag>오션, CSS float, clear }}

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

사용자 도구

사이트 도구

차이

문서 도구