사실 요새는 float를 사용하여 웹 문서를 구성하기 보다는 더 쉽고, 직관적인 방식인 flexbox를 사용한다. 그러나 float의 단점을 이해하고 flex를 사용하는 이유를 알아야 flexbox를 잘 사용할 수 있을 것 같아 오늘은 float에 대해 공부한 내용들을 풀어놓으려고 한다.

⛵ float

float는 뜨다, 부유하다 라는 뜻이다. float를 설정하면 기존의 문서 흐름에서 벗어나 띄워 부모 요소의 왼쪽이나 오른쪽으로 배치할 수 있다. float의 값에는 none, left, right, inline-start, inline-end 등이 있다.

none: 요소가 부유하지 않는다.

left: 자신을 포함하는 블록의 좌측에 부유하도록 한다.

right: 자신을 포함하는 블록의 우측에 부유하도록 한다.

inline-start: 자신을 포함하는 블록의 시작쪽에 위치하도록 한다. (대부분의 언어는 좌에서 우로 읽기 때문에 시작쪽인 좌측에 부유하는 것이 대부분이다.)

inline-end: 자신을 포함하는 블록의 끝쪽에 위치하도록 한다. (대부분의 언어는 좌에서 우로 읽기 때문에 끝쪽인 우측에 부유하는 것이 대부분이다.)

어느 요소를 float 설정하면 그 요소를 포함하고 있는 컨테이너에 안의 나머지 블록들도 영향을 받는데 이는 float된 블록이 정상적인 문서 흐름을 벗어났기 때문이다.

위의 예시처럼 만약 이미지와 텍스트가 같은 컨테이너의 형제 관계이고, 이미지가 float:left설정이 된 경우 텍스트는 이미지 바로 오른쪽에서부터 시작한다. 그러나 부모 요소가 float된 이미지를 담지 못하는 것을 확인할 수 있다. float를 사용하면 이처럼 원치 않게 형태가 망가질 수 있는데 이를 해결하기 위해서는 클리어링이라는 것을 해야 한다.

⛵ clearing

float를 사용하다보면 부모가 float된 자식을 못담아내는 경우를 확인하거나 float다음 요소가 float의 영향을 받는 현상을 자주 목격하게 된다. float된 요소의 높이를 부모가 인식하지 못하기 때문에 부모가 자식을 담아낼 수 없던 것이다. 따라서 float를 해제해주어야 하는데 float해제란 float된 요소의 float를 해제하는 것이 아닌 float요소 주변의 블록들이 float의 영향에서 벗어나게 하는 것이다. 이를 클리어링이라고 부르기도 한다.

클리어링에는 여러가지 방법이 있는데 클리어링 방법을 알아보기 전에 우선 clear라는 속성을 알아야 한다.

clear

clear 속성은 float된 엘리먼트에 적용하는 것이 아니라 float된 요소의 주변 엘리먼트들에 적용하는 것이다. clear의 키워드 값에는 none, left, right, both가 있다.

left는 왼쪽에 float된 요소가 존재하지 않도록 하는 것이다. 따라서 clear:left를 사용하면 해당 요소가 float된 요소 오른쪽에 위치하는 것이 아니라 아래쪽에 위치한다. clear:right도 마찬가지로 float된 요소가 오른쪽에 존재하지 않도록 하는 것이다. clear:both는 왼쪽, 오른쪽 모두 float된 요소가 지정해제 되도록 한다.

clear 속성을 알아보기 위해 양쪽에 크기가 다른 이미지를 float했다. 이번에도 역시 왼쪽 이미지 옆에 텍스트가 나오긴 하지만 맨위에서부터 시작하는 것이 아니라 오른쪽의 이미지 다음줄에서부터 텍스트가 시작하는 것을 확인할 수 있다. 이는 p태그에 clear:right를 주었기 때문이다. p태그의 오른쪽에 float된 요소가 없어야 하기 때문에 오른쪽 이미지 다음에 텍스트가 위치하는 것이다.

.container {
  background: #f6e58d;
}
img:nth-child(odd) {
  float: left;
}
img:nth-child(even) {
  float: right;
}
p {
  clear: right;
}

여전히 위의 예에서 float된 왼쪽 이미지를 부모 요소가 감싸지 못하는 것을 확인할 수 있다. clear 속성을 배웠으니 이제 다양한 클리어링 방법으로 이 문제를 해결해봐야겠다.

1. float를 부모에게도

float를 해제하는 방법 중 가장 단순한 방법은 부모에게도 float 속성을 주는 것이다. 이 방법을 사용하면 부모가 자식의 높이를 인식하게 할 수는 있지만 float 속성이 겹겹이 설정되어 있는 경우 조상 엘리먼트 모두에게 float 속성을 적용해야 하기 때문에 그리 좋은 방법은 아니다.

2. 부모의 display를 inline-block

float된 요소의 부모를 inline-block으로 설정하는 것도 높이를 인식할 수 있게 하는 방법이다.

.container {
  background: #f6e58d;
  display: inline-block; /* clearing */
}
img:nth-child(odd) {
  float: left;
}
img:nth-child(even) {
  float: right;
}

3. 부모의 overflow 설정

이번에도 역시 부모 요소에게 적용하는 것인데 부모의 overflow를 hidden 또는 auto로 설정하는 것이다. 보통 overflow는 넘치는 것을 숨길 때 사용하는 속성인데 float와 함께 사용하면 넘치는 내용을 부모요소가 포함시켜 숨긴다는 것으로 볼 수 있다. 자식의 높이가 부모보다 크다면 auto로 설정했을 때 스크롤바가 생성되고, hidden인 경우에는 내용이 잘릴 수 있기 때문에 많이 사용하는 방법은 아니다.

4. 빈 블록을 생성

float된 요소의 마지막에 내용이 없는 빈 블록을 생성하는 것도 하나의 방법이 될 수 있다. 이 블록에 clear:both 속성을 주게 되면 부모가 자식의 높이를 인식할 수 있게 된다. 그러나 아무런 내용이 없는 블록을 만드는 것은 DOM을 생성할 때 불필요한 연산이 되므로 좋은 방법이 아니다.

HTML

<body>
    <div class="container">
        <img src="https://source.unsplash.com/random/400x300" alt="">
        <img src="https://source.unsplash.com/random/400x200" alt="">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
        dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
        book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially
        unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
        recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <div class="empty"></div>
    </div>
</body>

CSS

.container {
  background: #f6e58d;
}
img:nth-child(odd) {
  float: left;
}
img:nth-child(even) {
  float: right;
}
/* clearing */
.empty {
  clear: both;
}

5. 가상선택자와 clearfix

float엘리먼트의 부모엘리먼트에 :after라는 가상요소를 사용해서 HTML문서에 존재하지 않는 새로운 요소를 생성한다. 그 요소에 clear속성을 주어 float를 해제한다. 이 방식을 사용하면 빈 블록을 생성하지 않고 쉽게 해결할 수 있다.

.container {
  background: #f6e58d;
  clear: both;
}
img:nth-child(odd) {
  float: left;
}
img:nth-child(even) {
  float: right;
}
/* clearing */
.container:after {
  content: "";
  display: block; 
  clear: both;
}

이 가상 선택자를 사용하는 것에 기반하여 clearfix라는 방법이 생겨났는데 현재 가장 많이 사용하는 방법이다. clearfix라는 이름을 가진 클래스의 css를 설정하고, clearing이 필요한 태그에 clearfix클래스를 추가하는 방법이다.

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

위의 방법들을 사용하면 모두 공통적으로 다음과 같은 화면을 얻을 수 있는데 부모 요소가 정상적으로 float된 요소까지 포함한다.

⛵ 결론 그리고...

레이아웃 디자인을 도와주는 float는 다양한 side effect를 발생시킬 수 있기 때문에 꼭 필요한 경우가 아니라면 사용하지 말도록 하자. float를 사용하여 부모 요소가 자식 요소의 크기를 인식하지 못한다면 float 설정, display:inline-block, overflow:hidden, 빈블록 생성, clearfix 등으로 해결해야 한다.

사실 float 설정, display:inline-block, overflow:hidden, 빈블록 생성 같은 방법으로 float 해제가 가능한 것은 새로운 BFC를 생성하는 것이기 때문인데 BFC는 다음 시간에 알아보도록 하자.

출처 및 참고

Author And Source

이 문제에 관하여(float부터 clearing까지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gotaek/float부터-clearing까지

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

float부터 clearing까지