문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 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:55]
emblim98 [The clear Property] 		wiki:css:css_note:css_float-clear [2023/01/13 18:44] (현재)
줄 30: 줄 30:
 플로트 된 요소가 계속 플로트 되지만, 플로트 속성이 제거된 요소는 웹 페이지에서 그 아래에 표시됩니다.\\ 플로트 된 요소가 계속 플로트 되지만, 플로트 속성이 제거된 요소는 웹 페이지에서 그 아래에 표시됩니다.\\
 \\ \\
-하기의 예제는 좌측으로의 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.1627278941.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