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

사용자 도구

사이트 도구

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

문서의 이전 판입니다!

목차

CSS Layout - float - clear and clearfix

  • description : CSS float - clear and clearfix
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-03-15



The source of this article


The clear Property

clear 속성을 사용하고, 다음 요소를 하단에 위치시키고 싶을 때, clear 속성을 사용해야 합니다.

clear 속성은 플로트 된 요소의 옆에 있는 요소에 적용될 것을 지정합니다.

clear 속성은 다음의 값들 중 하나를 가질 수 있습니다.

  • none - 요소는 플로트된 요소들의 좌측 또는 우측 아래에 위치하지 않습니다. 이것이 기본 값입니다.
  • left - 요소는 좌측으로 플로트된 요소들 아래로 위치하게 됩니다.
  • right - 요쇼는 우측으로 플로트된 요소들 아래로 위치하게 됩니다.
  • both - 요소는 좌측과 우측 양쪽으로 플로트된 요소들의 아래에 위치하게 됩니다.
  • inherit - 요소는 부모 요소의 clear 값을 상속 받습니다.


floats 속성을 제거할 때, clear 속성을 float 속성에 일치시켜야 합니다:
요소가 좌측으로 플르토 될 경우, 좌측으로 지워야 합니다.
플로트 된 요소가 계속 플로트 되지만, 플로트 속성이 제거된 요소는 웹 페이지에서 그 아래에 표시됩니다.

하기의 예제는 좌측으로의 float를 지웁니다. .div의 좌측에 플로팅 요소가 허용되지 않음을 의미합니다.

예제

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Without/With clear</title>
    <style>
        .div1 {
            float: left;
            width: 100px;
            height: 50px;
            margin: 10px;
            border: 3px solid green;
        }
 
        .div2 {
            border: 2px solid red;
        }
 
        .div3 {
            float: left;
            width: 100px;
            height: 50px;
            margin: 10px;
            border: 3px solid green;
        }
 
        .div4 {
            border: 2px solid red;
            clear: left;
        }
    </style>
</head>
 
<body>
    <h2>Without clear</h2>
    <div class="div1"><strong>div1</strong></div>
 
    <div class="div2">
        <strong>div2</strong> - 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"><strong>div3</strong></div>
    <div class="div4"><strong>div4</strong> - 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>
 
</html>



The clearfix Hack

어떤 한 요소가 자신을 포함하고 있는 요소보다 크고 float된 경우, 컨테이너 외부로 넘치게 됩니다.
그리고 나서, 이 문제를 해결하기 위해, 요소를 포함하는 것에 overflow: auato속성을 추가할 수 있습니다.

예제

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <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 {
            float: right;
        }
 
        .clearfix {
            overflow: auto;
        }
 
        .img2 {
            float: right;
        }
    </style>
</head>
 
<body>
 
    <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:
    </p>
 
    <div>
        <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...
    </div>
 
    <p style="clear:right">
        Add a clearfix class with overflow: auto; 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 adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
    </div>
 
</body>
 
</html>


overflow: auto clearfix는 마진과 패딩을 제어할 수 있는 한 잘 작동합니다.(그렇지 않을 경우, 스크롤 막대가 표시될 수 있슴). 그러나 새롭고 현대적인 clearfix hack은 사용하기에 더 안전하며, 대부분의 웹페이지에서 하기의 코ㅡ가 사용됩니다.

예제

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <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 {
            float: right;
        }
 
        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }
 
        .img2 {
            float: right;
        }
    </style>
</head>
 
<body>
 
    <p>
        In this example, the image is taller than the element containing it, and it is floated, so it overflows outsie of its container:
    </p>
 
    <div>
        <h2>Without Clearfix</h2>
        <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...
    </div>
 
    <p style="clear:right">
        Add a clearfix class with overflow: auto; 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 adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...
    </div>
 
</body>
 
</html>
, , ,
/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