[CSS] float 와 float 해제 방법 A to Z

[CSS] float 와 float 해제 방법 A to Z

float 와 float 해제 방법 A to Z

 

---

 

안녕하세요 Nuhends 입니다.

이번 포스팅에서는 float 에 관한 걸 알아보겠습니다.

 

다음과 같은 순서로 적어보겠습니다.

바쁘신 분들은 해결방법 2-4 방법으로 바로 넘어가시는 걸 추천합니다.

1. float 가 필요한 이유 (배경)
2. float 를 사용하는 방법
3. float 의 문제점과 해결 방법

 

 

0. 시작하기 앞서

최근에는 float 를 대신 사용할 flex, grid 등 다양한 레이아웃 속성이 나오고 있습니다.

float 는 오래된 속성이라, 사용하기 불편하고 어렵기도 합니다.

 

하지만 새로운 레이아웃 속성보다

구형 브라우저에서의 이슈가 없어 크로스 브라우징에 장점이 있고

이전에 작성된 거의 대다수의 코드들이 float 방식을 채택하고 있기 때문에

이 소스들을 유지 보수하기 위해서는

"반드시 float 에 대한 확실한 이해가 필요하다고 생각합니다."

 

중요도 : 🌟🌟🌟🌟🌟

 

---

 

1. float 가 생겨난 이유 (배경)

기본적으로 html 요소들의 레이아웃 속성(display, float, position, table, flex, grid)을 변경하지 않았을 때

웹페이지 요소는 원칙적으로 작성한 HTML 코드 순서대로(왼쪽에서 오른쪽, 위에서 아래) 흐름으로 자기 자신을 배치합니다.

이를 normal flow 레이아웃 기법이라고 합니다.

 

예제

 

See the Pen example normal flow by nuhends (@nuhends) on CodePen.

 

• display: block 은 컨텐츠의 크기와 상관없이 스크린 너비만큼 width 차지
• display: inline 과 inline-block 은 컨텐츠의 크기 만큼 width 차지

중요한 건, 화면에서 컨텐츠의 순서는 바뀌지 않는다는 점입니다.

 

새로운 레이아웃 구현 필요성

기존의 웹은 텍스트 형식의 정보전달 매체였기 때문에, normal flow 로 표현이 가능했습니다.

 

print layout & web layout

 

하지만 우리가 책이나 잡지에 흔히 등장하는 이미지와 텍스트 배치 레이아웃
(텍스트가 이미지를 둘러싸고 있는 듯한) 구현의 필요성이 생겼습니다.

 

이러한 레이아웃은 기존 normal flow 로 표현이 불가능합니다.

 

 

 

float 속성

이러한 배경에서 float 속성이 생겨났습니다.

float 라는 단어의 사전적 의미를 살펴보면, 둥둥 뜨다, 부유하다 입니다.

 

float 속성 적용 전, 후

예제: https://codepen.io/nuhends/pen/OJRpgzP

 

float 속성을 사용하면, 이런 편집 레이아웃을 구현할 수 있습니다.

 

 

 

기본적으로 float 속성은 엘리먼트의 흐름을 바꿉니다.

즉, 해당 요소(element)를 기본 nomarl flow 흐름에서 제외하고 둥둥 뜨게 만듭니다.

 

그러면 주변 텍스트 및 다른 요소가 해당 요소를 감싸게 됩니다.

 

이때, 속성값으로 left 혹은 right 를 주어 요소의 좌/우 배치를 변경할 수 있습니다.

 

---

반응형

 

2. float 활용

float 는 원래 이미지 텍스트 배치 용도(ex.잡지) 였지만

하지만 오늘날 실무에서는 전체 레이아웃 용으로 많이 사용되고 있습니다.

float로 만드는 현대 웹 레이아웃

 

위 그림의 오늘날 많이 쓰는 레이아웃을 float 로 만들어보겠습니다.

 

See the Pen float layout - step 1 by nuhends (@nuhends) on CodePen.

 

코드를 살펴보면

 

aside 에  float: left, width

main content 에  float: right, width

 

웹에서 보편적으로 사용하는 레이아웃을 만들 수 있다.

 

---

float 의 문제점과 해결책

이전 예시에서는 발견할 수 없지만, 사실 해당 코드에는 문제가 몇 가지 있습니다.

 

문제점

기본 css규칙에서 부모 요소는 자식 요소의 height 만큼의 영역을 가집니다.

(자식이 여러 개라면 자식 중, 큰 height 값이 적용이 됩니다)

 

즉, 자식의 컨텐츠가 늘어나면, 부모의 height는 자동으로 늘어납니다.

 

See the Pen basic : parent has child area by nuhends (@nuhends) on CodePen.

 

이전 레이아웃 예제에서 float 가 적용된 요소의 부모요소 .container 에 height 를 제거해보겠습니다.

 

자식 컨텐츠를 인식하지 못하는 float의 문제점 

 

그러면 다음 요소인 footer가 사라지는 문제가 발생합니다.

footer의 위치를 확인해보면 header 다음에 위치하게 된다.

 

왜 그럴까요? 다음과 같은 순서로 적용됩니다.

1. 앞서 알아본 것처럼 float가 적용되면, normal flow 에서 제외됨
2. 자식 요소가 뜨게 되면서 부모는 자식 요소의 크기를 인식할 수 없게 되고 height는 0 이 됩니다.
3. normal flow 흐름대로 부모 요소의 다음 요소인 footer가 aside 위치로 이동

결론적으로 float 를 주게 되면,

다음 요소의 레이아웃 배치에 영향을 끼치게 됩니다.

 

---

해결 방법

이를 해결하기 위한 방법으로는 두 가지가 있습니다.

 

1. 부모 요소의 높이 값 조절

제가 만든 예제 3에서 사용한 방법입니다.

부모가 자식의 height를 잡을 수 없기 때문에, 자식의 height 만큼 부모의 height에 넣어주는 방법입니다.

 

하지만 이 방법은 자식 요소에 들어가는 컨텐츠의 길이가 정해져 있지 않고 변한다면 사용할 수 없습니다.

 

즉, 사실상 사용하면 안 되는 안티 패턴입니다.

 

2. float 문제 해결 하기

float 를 해결하는 방법엔 여러 가지가 있는데, 이를 살펴보겠습니다. 

미리 결론을 말씀드리면 2-4 방법이 가장 많이 사용되고 합리적 방법입니다. (시간 없으신 분들을 위해 😊)

 

 

2-1. float 요소 부모에 overflow: hidden 적용하기

요소에 overflow: hidden 을 주게 되면, 해당 요소는 자식 요소가 normal flow 가 아니어도 인식할 수 있게 됩니다.

 

See the Pen float layout - overflow by nuhends (@nuhends) on CodePen.

 

 

float 요소의 부모 .container 에 overflow: hidden 을 주어서 해결하였습니다.

 

overflow: hidden의 단점

 

overflow: hidden 방법의 단점, 잘림 현상

이 방법은 container 를 벗어나는 요소를 숨기기(hidden) 때문에 이슈가 있습니다.

aside 에 있는 button을 눌러봅시다.

툴팁 레이어 같은 요소가 있을 경우 레이어가 잘리는 이슈가 발생합니다.

 

2-2. 다음 요소에 clear: both 적용

float 속성이 적용된 요소 다음 요소에 clear: both 를 적용하면

레이아웃이 다시 normal flow 로 바뀌게 됩니다. 이런 방법을 float 해제(clear) 라고 합니다.

 

See the Pen float layout - step 2 by nuhends (@nuhends) on CodePen.

 

.container 의 height 를 제거하고,

.footer 에 clear: both 를 주어서 float 를 해제하였습니다.

 

 

2-3. 다음 형제 DOM 만들고 clear: both 적용

 

 

이런 상황을 만들어보겠습니다.

banner 가 추가된 레이아웃

기획이 바뀌어서 디자인이 바뀌었습니다. 

footer 이전에 banner 영역이 추가되었다고 합니다.

 

이런... 그렇게 되면 float 해당 요소의 다음 요소가 footer → banner 로 변경됩니다.

그리고 footer 가 아닌 banner 에 clear: both 속성을 주는 것으로 수정해야 합니다.

추후에 banner2, banner3 ... 과 같이 다른 요소가 추가된다면 그때마다 수정이 필요합니다.

 

즉, float 적용된 다음 요소에서 float 해제를 처리하는 것 아니라

float가 적용된 요소와 그 부모 요소 내에서 float가 해제되어야

DOM 간에 의존성이 없어지고, 더 좋은 코드라고 볼 수 있습니다.

 

의존성을 없애기 위해, float가 적용된 요소 다음에 빈 div 를 넣어보겠습니다.

 

 

See the Pen float layout - step 4 by nuhends (@nuhends) on CodePen.

 

의존성을 없애기 위해, float 가 적용된 다음 요소에

div.null 이라는 요소를 만들고 clear: both 속성을 주었습니다.

이때 요소는 display: block 레벨의 태그여야 합니다. (ex. div, p, h 등)

 

2.4. 가상요소에 clear: both 주기

방법 2.3 의 경우, 스타일링을 위해 별도의 DOM 추가하는 방식입니다.

이러한 방식은 시멘틱상 불필요한 요소를 만들어 HTML 문서의 가독성을 떨어뜨린다는 단점이 있습니다.

 

그래서 고안된 방법이

float 대상 부모 요소에 css로 가상요소를 만들어 clear: both 속성을 주는 방법입니다.

 

See the Pen float layout - step 5 by nuhends (@nuhends) on CodePen.

이렇게 처리하면 HTML 문서에서 별도의 dom 생성 없이 css 만 사용하여

float를 준 그룹마다 독립적으로 float 해제를 할 수 있습니다.

 

이 방법이 가장 보편적으로 실무에서 사용되는 float를 해제하는 방법입니다.

 

---

포스팅이 여러분의 코딩에 조금이나마 도움이 되면 좋겠습니다.

 

글이 도움이 되셨다면 공감&댓글 부탁드립니다.
글 작성에 큰 힘이 됩니다. 🙂