이 질문은 일반적으로 왜 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 % 차지하지만 왼쪽이나 오른쪽으로 부동하면 보유하는 내용에 따라 크기가 조정됩니다.

1. 블록 레벨 요소의 정상적인 동작
2. 블록 레벨 요소의 부동 동작

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

1. div플로팅되지 않은 경우 차례로 렌더링됩니다.
2. div 왼쪽 또는 오른쪽에 띄워지면 서로 옆으로 이동합니다.

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

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

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

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

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

1. 문서의 정상적인 흐름
2. 왼쪽에 떠있는 섹션
3. 컨테이너의 배경색을 늘리기 위해 플로팅 된 요소 지우기

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

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

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

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

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

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

1. div왼쪽으로 떠서 section남은 공간 으로 이동
2. 떴다는 div너무 지워 section태그가 떴다 이하 렌더링 div의

제 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
----------------------------------

답변

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>

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>

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>

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>

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>