CSS : Float 정리 (1)

CSS를 배우면서 가장 헷갈리고 어려운 개념중 하나인 Float 

사실 헷갈리고 어려운 이유는 이 플로트가 가진 문제가 많기때문이다. 

그래서 현업에서는 플로트를 거의 쓰지 않는다고 한다. Float대신 Flex로 간단하게 처리하는 추세 

 

그럼에도 불구하고 프론트 엔드 개발자가 되어서 CSS 디버깅을 하려면 반드시 넘어야할 산이다.

다행이도 CSS에 어려운 개념은 그렇게 많지 않다. 

그 중 하나가 이 플로트라고 생각하고 내용이 이해되지 않는 것들을 다시 정리하면서 글을 써보았다.

 

 

Float : 사전적인 정의처럼 말 그대로 떠있는 개념으로 받아들이기 

 

 

빨간색 자식에 플로트를 주면 붕뜨고 붕뜬다는 것은 자기 집에서 나갔다는 것으로 받아들이자 

 

다른 요소들은 플로트된 자식에 대하여 이렇게 생각한다.

 

1. 집 나간 자식이 어디갔는지 알길이 없음

: 계속 마냥  아까운 방을 놔두고 기다릴 수 없음 

 

2. 노란, 파란 자식들이 빨간색 자식의 빈자리를 채움

 

3.   채워진 자리외에 남겨진 우측 공간을 낭비라 생각하고 부모요소의 크기는 맞춰 조절됨

 

 

 

 

결과적으로 이런 모양이 됨 

 

 

 

+실습

 

 

 

CSS 조건

 

Div (부모요소)에는 width 200px

그 아래 자식들 child red, yellow, blue 요소들 역시 각각 200px과 Height 200px을 줌

 

 

1. float : left 속성을 child red에 줬을 경우

두 가지 변화가 크게 생긴다.

 

변화

1. 플로트가 뜬 자리를 옐로우가 채워줌 그러므로 옐로우 차일드는 레드아래 겹쳐 보이지 않음
2. height의 총합이 변화

 

 Why?  여기서 상식

 

 

 

1. 

 

CSS에선 따로 부모의 height를 선언하지 않으면 자식 요소의 총합이 부모의 height 값으로 자동적으로 선언 됨

 

 

 

결과 : 빨간 차일드의 자리에 옐로가 채워줌과 동시에 height의 총합은 600px에서

400px로 200px 줄어듬

 

 

 

 

 

 

 

 

 

2. 블럭 요소로 변경 되는 특징

 

 

 

Inline

Inline block  ==> Block

bock

 

 

예시)

 

1. 자식요소들의 div (블럭속성)을 Inline요소인 span으로 바꿈

2. 그 상태에서 float : left 속성 적용

3. display : block으로 바뀐 것을 알 수 있다

 

 

 

다시 말해서 Block이 되었기때문에 width, height를 줄 수 있음

 

 

그런데 찐 블록과 다른 점이 하나 생김

 

 

블록인데 길막은 하지 못함

Float를 적용시킨 Block은 컨텐츠의 크기에 따라 display 값이 결정됨

또한 기존의 블럭의 속성인 margin이 자동으로 채워지는 것도 잃어버림

But 마진을 못 준다는 이야기는 아님

 

예시

 

 

 

1. Child red에게 width 100px과 float-left를 줌
2. float 속성은 display를 block으로 바꿔주지만, 찐 블럭의 속성인 '다른 컨텐츠가 오지 못하게 한줄에 남은 칸을 'margin'으로 채워주는 기능은 상실함

 

다시 말하지만 margin을 줄 수 없다는 이야기는 아님

 

결과 : Child yellow가 남은 100px자리에 들어와 채움 (찐 block에서는 있을 수 없는 일)

 

 

 

 

 

+ Float left, right의 속성 : 자기가 갈 수 있는 왼쪽과 오른쪽으로 가는 성질

 

 

(CSS값을 이렇게 주었을 때 어떻게 될까?)

 

 

결과

 

 

(차일드 블루를 주목하자)

부모의 width  400px, 차일드 레드와 옐로우가 각각 200px이기에 한줄을 다 차지함

그래서 블루입장에서 갈 수 있는 가장 오른쪽은 아래칸에서 오른쪽이 되는 것

 

 

 

 

 

 

 

 

 

 

 

그리고 오늘 마지막으로 한 가지 특성 더 정리할 것이다.

 

 

 

"플로트는 나만 볼 수 있다. "

 

 

 

플로트가 적용이 되면 block들은 플로트된 요소들을 없는 취급을 한다.

(그래서 child가 셋다 float를 먹힌 지금 같은 상황에선 Height값이 0이 된다)

 

 

그러나 문제는 Inline이나 image 요소들은

요소들은 float의 존재를 안다는 것이다.

 

 

예제)

 

아래 div를 만들어보자 그리고 그 안에 인라인 요소인 글자들을 채워보자 

결과는 어떻게 되겠는가? 상식대로라면

 

Float로 셋다 없는 취급을 하기에, 아래만든 'other' 클래스를 가진 div가

온전히 화면 위쪽을 채워야한다.

 

 

 

 

그러나 예상과 달리

결과는 처참하다

 

채우긴 채웠는데…. 글자들은 교모하게 float를 피해서 채워진다.

이 말은 float를 써도 블록안에 컨텐츠들은 Float 요소들에 영향을

받는다는 것이다.

 

 

 

 

그러므르 플로트는 레이아웃을 망칠 가능성이 매우 농후함

 

굳이 써야하나 싶을 정도로 원망이 든다.

그래서 실제로 요즘 현업에서는 잘 안 쓴다고 한다. 그래도 여전히 플로트를 쓴 경우가 존재하기에 이것을 알아두긴 해야한다.
 

 

 

그렇다면 이 문제를 어떻게 해결할 수 있을까?