문서의 이전 판입니다!

CSS Layout - float - clear and clearfix

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

Source of the article

CSS float - clear and clearfix

The clear Property

clear 속성은 어떤 요소가 지워진 요소 옆과 어떤 방향에서 떠 있을 수 있는 지를 지정합니다.

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

none - 양쪽에 플로팅 요소를 허용합니다. 이것이 기본 값입니다.
left - 좌측에 플로팅 요소가 허용되지 않습니다.
right - 우측에 플로팅 요소가 허용되지 않습니다.
both - 좌측 또는 우측에 플로팅 요소가 허용되지 않습니다.
inherit - 요소는 부모의 명확한 값을 상속 받습니다.

clear속성을 사용하는 가장 일반적인 방법은 요소에 float속성을 사용한 이후입니다.

float를 지울 때 clear를 float에 일치시켜야 합니다: 요소가 좌측으로 float될 경우, 좌측으로 지워야 합니다. float된 요소가 계속 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>

오션,, CSS, float,, clear

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

목차

CSS Layout - float - clear and clearfix

Source of the article

The clear Property

예제

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

사용자 도구

사이트 도구

목차

CSS Layout - float - clear and clearfix

Source of the article

The clear Property

예제

문서 도구