[CSS] float, clear

안녕하세요, Einere입니다.

(ADblock을 꺼주시면 감사하겠습니다.)

---

float

CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.

float속성은 보통 신문과 같이, 특정 요소 주변으로 문자열들을 어울리게 배치하고자 할 때 사용합니다.

부유 요소는 문서의 보통 흐름(noraml flow)에서 제외됩니다.

만약 부유하는 요소가 여러개라면, 다른 부유 요소에 닿을때 까지 밀착합니다. (즉, 부유 요소 끼리는 겹치지 않습니다.)

만약 부유하는 요소가 여러개이며 자신을 포함하는 블록의 너비를 넘어서는 경우, 다음 라인으로 넘어갑니다. (wrap)

 

값

none : 해당 요소가 부유(float)하지 않습니다.

left : 자신을 포함하는 블록 내에서, 좌측에 부유합니다.

right : 자신을 포함하는 블록 내에서, 우측에 부유합니다.

inline-start : 자신을 포함하는 블록 내에서, 시작쪽에 부유합니다. (대부분의 언어는 좌->우 이므로 좌측입니다.)

inline-end : 자신을 포함하는 블록 내에서, 끝쪽에 부유합니다. (대부분의 언어는 좌->우 이므로 우측입니다.)

 

적용 대상

모든 요소들. 단, display가 none이라면 효과가 적용되지 않는다.

 

 

clear

<div id="app">
      <h1 class="header-1st">header 1</h1>
      <section class="floating-left"></section>
      <section class="floating-right"></section>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
        faucibus nulla enim, nec elementum nisl tempus vel. Suspendisse vehicula
        mollis consequat. Etiam nec luctus ex, quis placerat nulla. Vivamus dui
        elit, molestie id varius non, pulvinar bibendum urna. Vestibulum lorem
        metus, tristique et scelerisque porttitor, vulputate vel arcu. Donec ut
        tristique odio, in mollis nunc. Nam aliquet quam nec lectus varius,
        vitae pulvinar neque dapibus. Integer sodales dapibus sapien et sodales.
        Praesent nec suscipit libero. Donec nulla neque, sodales ut vehicula eu,
        volutpat sed arcu. Praesent tristique sapien erat, nec varius felis
        ultricies faucibus. Sed tempus arcu est, eu varius mi bibendum sit amet.
        Nulla facilisi.
      </p>
      <h1 class="header-2nd">header 2</h1>
      <p>
        Curabitur gravida rutrum vehicula. Aliquam tellus lacus, mollis at
        condimentum sed, tincidunt sit amet lacus. Cras sed ipsum a purus
        convallis mollis. Donec est dolor, molestie quis eros eu, dictum maximus
        elit. Fusce sem ante, luctus ut ullamcorper id, euismod et ante. Duis
        dignissim commodo sapien at convallis. Fusce sed dolor turpis. Curabitur
        dapibus blandit nunc, sit amet sollicitudin nunc suscipit ultrices.
        Aenean libero augue, tempor et dui id, eleifend porttitor est. Aenean
        placerat placerat neque, at placerat sapien commodo id. Nullam dapibus
        iaculis lectus, et blandit arcu pretium ut. Curabitur id lectus ipsum.
      </p>
    </div>

body {
  font-family: sans-serif;
}

section {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 10px;
}

.floating-left {
  float: left;
}

.floating-right {
  float: right;
}

위 그림에서, 부유 요소의 높이는 텍스트보다 짧기 때문에 텍스트가 부유 요소를 감싸게 됩니다.

 

<div id="app">
      <h1 class="header-1st">header 1</h1>
      <section class="floating-left"></section>
      <section class="floating-right"></section>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
        faucibus nulla enim, nec elementum nisl tempus vel.
      </p>
      <h1 class="header-2nd">header 2</h1>
      <p>
        Curabitur gravida rutrum vehicula. ...
      </p>
    </div>

위 그림과 같이 Lerem ipsum으로 시작하는 단락이 매우 짧은 경우, header 1과 같은 다음 단락을 헤더와 함께 시작하려고 한다면 빨간 상자 사이에 다음 단락이 위치하게 됩니다.

여기서 header 2를 부유 요소 다음에 위치하도록 하고 싶다면 clear속성을 사용해야 합니다.

 

...

.header-2nd {
  clear: both;
}

그러면 다음과 같이 헤더는 부유요소 밑으로 내려가게 됩니다.

 

값

none : 이전 요소들의 float 속성을 지우지 않습니다.

left : float 속성이 left인 요소 바로 다음에 위치합니다.

right : float 속성이 right인 요소 바로 다음에 위치합니다.

both : float 속성이 left인 요소와 right인 요소 중 제일 하단에 위치한 요소 바로 다음에 위치합니다.

inline-start : float 속성이 left(ltr 스크립트)이거나 right(rtl 스크립트)인 요소 바로 다음에 위치합니다.

inline-end : float 속성이 right(ltr 스크립트)이거나 left(rtl 스크립트)인 요소 바로 다음에 위치합니다.

 

 

참고

https://developer.mozilla.org/ko/docs/Web/CSS/float

float

https://developer.mozilla.org/ko/docs/Web/CSS/clear

clear