293

다음 CSS 규칙은 무엇을합니까?

.clear { clear: both; }

왜 사용해야합니까?

css css-float

— 피터 모텐슨
소스

22

CSS를 사용할 때 float오른쪽 또는 왼쪽이 아닌 아래의 다음 요소를 원할 때 .

— Riz

요소가 명확와 함께 사용하는 경우 부동 요소는 왼쪽과 지정된 요소의 오른쪽에 허용 : 모두

— JackXu

687

이 질문은 일반적으로 왜 OR을 사용 하는지, 왜 정확히합니까 ?에 초점을 맞추기 때문에 여기에서 수레가 어떻게 작동하는지 자세히 설명하지 않을 것입니다 ...clear: both;clear: both;

나는이 대답을 간단하고 요점으로 유지하고 왜 clear: both;필요한지 또는 무엇 을 그래픽으로 설명 할 것입니다 ...

일반적으로 설계자는 왼쪽 또는 오른쪽으로 요소를 띄우고 다른 쪽은 나머지 공간을 차지할 수 있도록 다른쪽에 빈 공간을 만듭니다.

왜 요소를 띄우나요?

디자이너가 2 개의 블록 레벨 요소를 나란히 필요로 할 때 요소가 플로팅됩니다. 예를 들어 아래와 같은 레이아웃을 가진 기본 웹 사이트를 디자인하고 싶다고 가정 해보십시오.

여기에 이미지 설명을 입력하십시오

데모 이미지의 라이브 예 .

데모 코드

코드 스 니펫 표시

/*  CSS:  */

* { /* Not related to floats / clear both, used it for demo purpose only */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

header, footer {
    border: 5px solid #000;
    height: 100px;
}

aside {
    float: left;
    width: 30%;
    border: 5px solid #000;
    height: 300px;
}

section {
    float: left;
    width: 70%;
    border: 5px solid #000;
    height: 300px;
}

.clear {
    clear: both;
}

<!-- HTML -->
<header>
    Header
</header>
<aside>
    Aside (Floated Left)
</aside>
<section>
    Content (Floated Left, Can Be Floated To Right As Well)
</section>
<!-- Clearing Floating Elements-->
<div class="clear"></div>
<footer>
    Footer
</footer>

스 니펫 확장

참고 : 당신은 추가해야 할 수도 있습니다 header, footer, aside, section등 (및 기타 HTML5 요소) display: block;명시 적 요소는 블록 레벨 요소임을 언급에 대한 스타일 시트입니다.

설명:

기본 레이아웃, 1 헤더, 1 사이드 바, 1 콘텐츠 영역 및 1 바닥 글이 있습니다.

에 대한 수레가 없습니다 header. 다음에는 aside웹 사이트 사이드 바에 사용할 태그가 있으므로 요소를 왼쪽으로 띄울 것입니다.

참고 : 기본적으로 블록 수준 요소는 문서 너비를 100 % 차지하지만 왼쪽이나 오른쪽으로 부동하면 보유하는 내용에 따라 크기가 조정됩니다.

알다시피, 떠 다니는 왼쪽 div공간은 사용되지 않은 공간으로 남겨두고 div남은 공간으로 이동할 수 있습니다.

자, 이것이 왼쪽이나 오른쪽에 떠있을 때 블록 레벨 요소가 어떻게 작동하는지, 이제 왜 clear: both;필요한 이유는 무엇입니까?

당신이 레이아웃 데모에서 참고한다면-당신이 잊어 버린 경우에, 여기 에 ..

라는 클래스를 사용하고 있으며 값이 .clear이라는 속성 clear이 both있습니다. 왜 필요한지 보자 both.

나는 부유 한 aside과 section왼쪽 요소는, 그래서 우리는 수영장,이 시나리오, 가정 header단단한 땅을, aside그리고 section수영장에 떠있다 및 바닥 글 다시 단단한 땅,이 같은 것입니다 ..

부동 뷰

따라서 푸른 물은 떠 다니는 요소의 면적이 무엇인지 모릅니다. 수영장보다 작거나 작을 수 있으므로 CSS 초보자의 90 %가 어려움을 겪는 일반적인 문제가 있습니다. 컨테이너 요소의 배경이 늘어나지 않는 이유 부동 요소를 보유 할 때. 컨테이너 요소가 여기 에 POOL 이고 POOL 은 얼마나 많은 객체가 떠 있는지, 또는 떠 다니는 요소의 길이 또는 너비가 무엇인지 알지 못하기 때문에 단순히 늘어나지 않습니다.

( 이 작업을 깔끔하게 수행하려면이 답변의 ^[Clearfix] 섹션을 참조하십시오 . div설명 목적으로 의도적 으로 빈 예제를 사용하고 있습니다)

위의 3 가지 예를 제공했습니다. 첫 번째는 red컨테이너가 플로팅 된 객체를 보유하지 않기 때문에 배경이 예상대로 렌더링 되는 일반적인 문서 흐름 입니다.

두 번째 예에서 객체가 왼쪽으로 떠 다닐 때 컨테이너 요소 (POOL)는 떠 다니는 요소의 크기를 알 수 없으므로 떠 다니는 요소 높이까지 늘어나지 않습니다.

여기에 이미지 설명을 입력하십시오

를 사용한 후 clear: both;컨테이너 요소는 부동 요소 크기로 늘어납니다.

여기에 이미지 설명을 입력하십시오

clear: both;사용되는 또 다른 이유는 나머지 공간에서 요소가 위로 이동하는 것을 방지하기위한 것입니다.

두 요소를 나란히 놓고 그 아래에 다른 요소를 원한다고 가정하십시오. 따라서 두 요소를 왼쪽으로 띄우고 그 아래에 다른 요소를 원할 것입니다.

제 1 예

여기에 이미지 설명을 입력하십시오

두 번째 예

여기에 이미지 설명을 입력하십시오

마지막으로 footer태그 clear를 선언하기 전에 클래스를 사용했기 때문에 부동 요소 후에 태그가 렌더링 footer되므로 모든 부동 요소 (왼쪽 / 오른쪽)가 해당 지점까지 지워집니다.

클리어 픽스

float와 관련된 clearfix로갑니다. @Elky 에 의해 이미 지정된 바와 같이 , 우리가 이러한 부동 소수점을 지우는 방법은 div요소가 아닌 빈 요소를 사용하기 때문에 깨끗한 방법 이 아닙니다 div. 따라서 여기에 명확한 수정이옵니다.

부모 요소가 끝나기 전에 빈 요소를 만드는 가상 요소로 생각하십시오. 이렇게하면 플로팅 요소가 들어있는 래퍼 요소가 자동으로 제거됩니다. 이 요소는 문자 그대로 DOM에 존재하지 않지만 작업을 수행합니다.

플로팅 된 요소가있는 래퍼 요소를 자체적으로 지우려면 다음을 사용할 수 있습니다.

.wrapper_having_floated_elements:after {  /* Imaginary class name */
  content: "";
  clear: both;
  display: table;
}

:after내가 사용 하는 의사 요소에 주목하십시오 class. 그러면 랩퍼 요소가 닫히기 직전에 가상 요소가 작성됩니다. 돔을 살펴보면 문서 트리에 어떻게 나타나는지 알 수 있습니다.

보시다시피 div, 부동 자식 다음에 렌더링됩니다. 여기서 우리 는 이것에도 사용하는 속성을 div가진 빈 요소와 동등한 수레를 지 웁니다 clear: both;. 이제 이유 display: table;와 content이 답변의 범위를 벗어하지만 당신은에 대해 자세히 배울 수 있습니다 여기 의사 요소를 .

IE8은 :afterpseudo를 지원하므로 IE8에서도 작동 합니다 .

원래 답변 :

대부분의 개발자는 자신의 페이지에 콘텐츠를 왼쪽 또는 오른쪽으로 띄우고, 로고, 사이드 바, 콘텐츠 등을 포함하는 div는 왼쪽이나 오른쪽으로 띄워 져 나머지 공간은 사용하지 않고 다른 컨테이너를 배치하면 나머지 공간에도 플로트가 있으므로 clear: both;사용 되지 않도록 왼쪽이나 오른쪽에 떠있는 모든 요소를 지 웁니다.

데모:

------------------ ----------------------------------
div1(Floated Left) Other div takes up the space here
------------------ ----------------------------------

이제 다른 div를 아래 div1에서 렌더링하려면 어떻게해야합니까? 그래서 clear: both;왼쪽 또는 오른쪽의 모든 수레를 지울 수 있습니다.

------------------
div1(Floated Left)
------------------
<div style="clear: both;"><!--This <div> acts as a separator--></div>
----------------------------------
Other div renders here now
----------------------------------

— 미스터 에일리언
소스

3

수레에 대해 들어 본 적이 없다면 먼저 수레에 대한 소개를 읽으십시오 --- 예를 들어 다음 답변의 링크를 참조하십시오. 그런 다음 돌아와서이 답변을 읽으십시오.

— osa

37

메모를 받아, 수레가되었다 하지 원래 옆에 두 개의 블록 레벨 요소 측면을 가지고 발명, 그것은 단지 부작용입니다! 원래 목적은 텍스트가 이미지 주위에 인라인으로 흐르도록했기 때문에 이미지를 어느 방향으로나 띄 웠습니다.

— Madara의 유령

3

일반적인 아이디어를 얻기 위해이 글을 읽기 전에 참조 할 관련 짧은 대답 .. stackoverflow.com/questions/16568272/…

— Mr. Alien

@ mr-alien 좋은 예입니다. 그러나 화면을 축소 할 때 jsfiddle.net/N82UD/1 의 경우 float에 문제가 있고 "cleared"요소가 플로우를 따르지 않습니다. jsfiddle.net/N82UD/138 It 플로트 아이템 2의 공간을 차지합니다

— Omar

1

@Carlo : 트위터 부트 스트랩과 같은 템플릿에서 많이 사용되는 대안; 배치하는 것입니다 display: inline-block요소에, 부모에 사용할 수있는 text-align: left, text-align: center또는 text-align: right예를 들어.

— Daan

39

이 clear속성은 요소의 왼쪽, 오른쪽 또는 양쪽이 동일한 블록 서식 컨텍스트 내에서 이전에 부동 요소에 인접 할 수 없음을 나타냅니다. 클리어 된 요소는 해당 플로팅 된 요소 아래로 푸시됩니다. 예 :

`clear: none;` 요소는 부동 요소에 인접 해 있습니다

코드 스 니펫 표시

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-none {
  clear: none;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-none">clear: none;</div>

스 니펫 확장

`clear: left;` 왼쪽 부유 요소 아래로 밀린 요소

코드 스 니펫 표시

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.clear-left {
  clear: left;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-left">clear: left;</div>

스 니펫 확장

`clear: right;` 오른쪽 부유 요소 아래로 밀린 요소

코드 스 니펫 표시

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-right {
  clear: right;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-right">clear: right;</div>

스 니펫 확장

`clear: both;` 모든 부동 요소 아래로 밀린 요소

코드 스 니펫 표시

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-both">clear: both;</div>

스 니펫 확장

`clear` 현재 블록 서식 컨텍스트 외부의 수레에 영향을 미치지 않습니다.

코드 스 니펫 표시

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.inline-block {
  display: inline-block;
  background: #BDF;
}
.inline-block .float-left {
  height: 60px;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="inline-block">
  <div>display: inline-block;</div>
  <div class="float-left">float: left;</div>
  <div class="clear-both">clear: both;</div>
</div>

스 니펫 확장

— 살만 A
소스

1

우수한. 이것이 가장 좋은 대답입니다. 다른 답변이 왜 받아 들여 졌는지 궁금합니다.

— sawa

display: inline-block;이 시나리오에서 CSS 속성을 제거하면 어떻게 됩니까? inline-block부모 요소를 class가있는 형제 요소로 확장합니다 float-left. "clear는 현재 블록 서식 컨텍스트 외부의 수레에 영향을 미치지 않습니다"문을 잘못 만듭니다. 누군가 설명해 주시겠습니까?

— Sashrika Waidyarathna

@SashrikaWaidyarathna : 부모 요소가 반드시 자식에 대한 블록 서식 컨텍스트 를 생성하지는 않습니다 . 귀하의 예 (a) 제거 display: inline-block는 더 이상 블록 서식 컨텍스트를 생성하지 않음을 의미합니다. (b) 해당 요소 내부의 수레 / 지우기 및 첫 번째 수레는 모두 동일한 블록 서식 컨텍스트 (뷰포트)의 일부가됩니다.

— Salman A

CSS 사양을 설명하는 설명에 감사드립니다. 블록 서식 컨텍스트의 정의를 알지 못했습니다.

— Sashrika Waidyarathna

2

선다 피 차이 도플 갱어?

— Manoj Kumar

23

CSS 플로트 및 클리어

샘플 바이올린

with clear:both에서 속성 을 제거 하고 플로팅이 어떻게 따르는 지 확인하십시오 .divclass sampledivs

— 프리 얀크 파텔
소스

13

Mr. Alien의 답변은 완벽하지만 어쨌든 <div class="clear"></div>마크 업을 더럽히는 해킹이기 때문에 사용하지 않는 것이 좋습니다 . 이것은 div잘못된 구조와 의미 측면에서 쓸모가 없으며 코드도 유연하지 않습니다. 일부 브라우저에서이 div는 추가 높이를 발생 시키므로 height: 0;더 나쁘게 추가해야합니다 . 그러나 실제 문제는 플로팅 된 요소 주위에 배경이나 테두리를 추가하려고 할 때 시작됩니다 . 웹이 잘못 설계 되었기 때문에 축소 될 것 입니다. 부동 소수점 요소를 clearfix CSS 규칙 이있는 컨테이너에 래핑하는 것이 좋습니다 . 이것은 해킹이지만 인간과 SEO 로봇이 사용하기 쉽고 아름답고 유연합니다.

— 엘키
소스

이 다른 게시물에 대한 자세한 내용은 clearfix다음 과 같습니다. stackoverflow.com/questions/211383/…

— Bill Hoag

2

하나의 요소를 다른 요소의 맨 아래에 배치하려면 CSS에서이 코드를 사용합니다. 수레에 사용됩니다.

컨텐츠를 플로팅하면 왼쪽 또는 오른쪽으로 플로팅 할 수 있습니다. 따라서 일반적인 레이아웃에서는 왼쪽 탐색 메뉴, 컨텐츠 div 및 바닥 글이있을 수 있습니다.

바닥 글이 두 플로트 아래에 유지되도록하려면 (왼쪽 및 오른쪽으로 부동 한 경우) 바닥 글을로 설정하십시오 clear: both.

이렇게하면 두 수레 아래에 유지됩니다.

(왼쪽 만 지우면 실제로해야합니다 clear: left;.)

이 자습서를 진행하십시오.

— 사이드
소스

3

어떤 튜토리얼?

— 피터 Mortensen

CSS 규칙 "clear : both"의 기능은 무엇입니까?

왜 요소를 띄우나요?

설명:

제 1 예

두 번째 예

클리어 픽스

원래 답변 :

데모:

clear: none; 요소는 부동 요소에 인접 해 있습니다

clear: left; 왼쪽 부유 요소 아래로 밀린 요소

clear: right; 오른쪽 부유 요소 아래로 밀린 요소

clear: both; 모든 부동 요소 아래로 밀린 요소

clear 현재 블록 서식 컨텍스트 외부의 수레에 영향을 미치지 않습니다.

`clear: none;` 요소는 부동 요소에 인접 해 있습니다

`clear: left;` 왼쪽 부유 요소 아래로 밀린 요소

`clear: right;` 오른쪽 부유 요소 아래로 밀린 요소

`clear: both;` 모든 부동 요소 아래로 밀린 요소

`clear` 현재 블록 서식 컨텍스트 외부의 수레에 영향을 미치지 않습니다.