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

사용자 도구

사이트 도구

현재 위치: start » wiki » css » css_note » css_float-clear
wiki:css:css_note:css_float-clear

차이

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

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판 		이전 판
wiki:css:css_note:css_float-clear [2021/07/26 14:42]
emblim98 [Source of the article] 		wiki:css:css_note:css_float-clear [2023/01/13 18:44] (현재)
줄 14: 줄 14:
  
 ======The clear Property====== ======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> 
-<!DOCTYPE html> 
-<html lang="en"> 
  
-<head> +==== Example ==== 
-    <meta charset="UTF-8"> +하기의 예제는 좌측으로의 플로트 속성을 제거합니다.\\  
-    <meta http-equiv="X-UA-Compatible" content="IE=edge"> +%%<div2>%% 요소가 좌측으로 플로트 된 %%<div1>%% 요소 아래에 위치된다는 것을 의미합니다.\\ 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"> +<code css> 
-    <title>Without/With clear</title> +<style> 
-    <style> +      .div1 { 
-        .div1 { +        float: left; 
-            float: left; +        padding: 10px; 
-            width: 100px; +        border: 3px solid #73ad21; 
-            height: 50px; +      }
-            margin: 10px; +
-            border: 3px solid green; +
-        }+
  
-        .div2 { +      .div2 { 
-            border: 2px solid red; +        padding: 10px; 
-        }+        border: 3px solid red; 
 +      }
  
-        .div3 { +      .div3 { 
-            float: left; +        border: 3px solid #72a; 
-            width: 100px; +        padding: 10px; 
-            height: 50px; +        float: left; 
-            margin: 10px; +      }
-            border: 3px solid green; +
-        }+
  
-        .div4 { +      .div4 { 
-            border: 2px solid red; +        border: 3px solid green; 
-            clear: left; +        padding: 10px; 
-        }+        clear: left; 
 +      }
     </style>     </style>
-</head> +  </head> 
- +  <body>
-<body>+
     <h2>Without clear</h2>     <h2>Without clear</h2>
-    <div class="div1"><strong>div1</strong></div> +    <div class="div1">div1</div>
     <div class="div2">     <div class="div2">
-        <strong>div2</strong> - Notice that div2 is after div1 in the HTML code.  +      div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the 
-        However, since div1 floats to the left, the text in div2 flows around +      left, the text in div2 flows around div1.
-        div1.................................................+
     </div>     </div>
-    <br><br>+    <br /><br />
  
     <h2>With clear</h2>     <h2>With clear</h2>
-    <div class="div3"><strong>div3</strong></div> +    <div class="div3">div3</div> 
-    <div class="div4"><strong>div4</strong> - Here, clear: left; moves div4 down below the floating div3.  +    <div class="div4"> 
-    The value "left" clears elements floated to the left. You can also clear "right" and "both".+      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>     </div>
-</body>+  </body> 
 +</code> 
 + 
 +======The clearfix Hack====== 
 +플로트 된 요소가 플로트 된 요소를 포함하는 요소보다 더 큰 경우, 컨테이너 외부로 __넘치게 됩니다(overflow)__.\\ 
 +이 문제를 해결하기 위해, clearfix hack을 추가할 수 있습니다.\\
  
-</html> 
-</code> 
-\\ 
-\\ 
-=====The clearfix Hack===== 
-어떤 한 요소가 자신을 포함하고 있는 요소보다 크고 float된 경우, 컨테이너 외부로 넘치게 됩니다.\\ 
-그리고 나서, 이 문제를 해결하기 위해, 요소를 포함하는 것에 ''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>     </style>
-</head> +  </head> 
- +  <body> 
-<body> +    <h2>Without Clearfix</h2>
- +
-    <h2>Clearfix</h2>+
  
     <p>     <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>     </p>
  
     <div>     <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>     </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>     </p>
  
     <div class="clearfix">     <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>     </div>
- +  </body>
-</body> +
- +
-</html>+
 </code>  </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>     </style>
-</head> +  </head> 
- +  <body> 
-<body>+    <h2>Without Clearfix</h2>
  
     <p>     <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>     </p>
  
     <div>     <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>     </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">     <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>     </div>
- +  </body>
-</body> +
- +
-</html>+
 </code> </code>
  
 {{tag>오션, CSS float, clear }} {{tag>오션, CSS float, clear }}
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_float-clear.1627278172.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki