MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

요약

clear CSS 속성(property)은 요소가 선행 부동(floating) 요소 다음일 수 있는지 또는 그 아래로 내려가(해제되어(cleared))야 하는 지를 지정합니다. clear 속성은 부동 및 비부동 요소 모두에 적용됩니다.

비부동 블록에 적용되는 경우, 모든 관련 부동체(floats)의 마진 경계 아래로까지 요소의 보더 경계를 아래로 내립니다. 이 움직임(이 일어나는 경우)은 마진 상쇄가 일어나지 않도록 합니다.

부동 요소에 적용되는 경우, 모든 관련 부동체의 마진 경계 아래로 요소의 마진 경계를 옮깁니다. 이는 나중(later) 부동체의 위치에 영향을 줍니다, 나중 부동체가 앞선(earlier) 부동체보다 높게 위치될 수 없기에.

해제(cleared)와 관련된 부동체는 같은 블록 형성 문맥 내 앞선 부동체입니다.

주의: 요소가 그 안에 모든 부동 요소를 포함하고 싶은 경우, 컨테이너도 부동하거나 컨테이너의 ::after 대체 가상 요소clear를 쓸 수 있습니다.

#container::after {
   content: "";
   display: block;
   clear: both;
}

초기값none
적용대상block-level elements
상속no
Mediavisual
Computed valueas specified
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

구문

clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

clear: inherit;

none
요소가 지난 부동 요소를 해제하기 위해 아래로 이동되지 않음을 나타내는 키워드입니다.
left
요소가 지난 left 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.
right
요소가 지난 right 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.
both
요소가 지난 both left 및 right 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.
inline-start
요소가 포함 블록의 시작 쪽 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다, 즉 ltr 스크립트의 left 부동체 및 rtl 스크립트의 right 부동체.
inline-end
요소가 포함 블록의 끝 쪽 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다, 즉 ltr 스크립트의 right 부동체 및 rtl 스크립트의 left 부동체.

형식 구문

none | left | right | both | inline-start | inline-end

'wrapper' class 있는 div는 clear 속성의 유용성이 눈에 더 잘 띄도록 border를 추가합니다

clear: left

HTML Content

<div class="wrapper">

    <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>

    <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

    <p class="left">This paragraph clears left.</p>

</div>

CSS Content

.wrapper{
    border:1px solid black;
    padding:10px;
}
.left {
    border: 1px solid black;
    clear: left;
}
.black {
    float: left;
    margin: 0;
    background-color: black;
    color: #fff;
    width: 20%;
}
.red {
    float: left;
    margin: 0;
    background-color: red;
    width:20%;
}
p {
    width: 50%;
}

clear: right

HTML Content

<div class="wrapper">

    <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>

    <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

    <p class="right">This paragraph clears right.</p>

</div>

CSS Content

.wrapper{
    border:1px solid black;
    padding:10px;
}
.right {
    border: 1px solid black;
    clear: right;
}
.black {
    float: right;
    margin: 0;
    background-color: black;
    color: #fff;
    width:20%;
}
.red {
    float: right;
    margin: 0;
    background-color: red;
    width:20%;
}
p {
    width: 50%;
}

clear: both

HTML Content

<div class="wrapper">

    <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p>

    <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>

    <p class="both">This paragraph clears both.</p>

</div>

CSS Content

.wrapper{
    border:1px solid black;
    padding:10px;
}
.both {
    border: 1px solid black;
    clear: both;
}
.black {
    float: left;
    margin: 0;
    background-color: black;
    color: #fff;
    width:20%;
}
.red {
    float: right;
    margin: 0;
    background-color: red;
    width:20%;
}
p {
    width: 45%;
}

스펙

스펙 상태 설명
CSS Logical Properties Level 1
The definition of 'float and clear' in that specification.
Editor's Draft inline-startinline-end 값 추가
CSS Level 2 (Revision 1)
The definition of 'clear' in that specification.
Recommendation 중요한 변화 없음, 세부사항은 명확해졌지만.
CSS Level 1
The definition of 'clear' in that specification.
Recommendation 초기 정의

브라우저 호환성

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0
inline-start, inline-end No support 45 (45) [1] No support No support No support
Feature Android Firefox Mobile (Gecko) Firefox OS IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1) 1.0 6.0 6.0 1.0
inline-start, inline-end No support 45.0 (45) [1] 2.5 No support No support No support

[1] Nightly 및 Aurora (Dev 판)에서는 기본으로 활성화됨; release 또는 beta 버전에서 이를 활성화하려면, layout.css.float-logical-values.enabledtrue로 켜야 합니다.

참조

문서 태그 및 공헌자

 이 페이지의 공헌자: Netaras
 최종 변경: Netaras,