Float를 배우는 이유는?
Block요소들을 가로배치 하기위함
Block은 자기 다음에 오는 녀석들이 자신의 영역을 침범하지 않게 '길막'에 특화되어있었다.
그렇게되면 가로배치가 굉장히 어려워지는데 Block의 길막을 해결해주는 것이 바로!
Float
float
사전적의미 : (물 위나 공중에서)떠가다, 뜨다
오늘 알아야하는 목표 :
What happens
Float를 사용하면 무슨일이 일어나는지 그에 대한 변화와 현상들에 대해서 꼼꼼히 살펴보자
How to fix it
Flat로 망가진 Layout을 어떻게 다시 잡을 수 있을지에 대해서 공부하자
What happens (Float를 사용하면 무슨일이 일어날까?)
#1 집 나간 내 새끼, 찾을 길 없네
#2 블록으로 신분상승
#3 길막을 못해 슬픈 블록아!
#4 플로트, 나만 볼 수 있어요(feat.인라인)
#1 집 나간 내 새끼, 찾을 길 없네
만약 어떤 요소가 float가 돼서 붕~떠버렸다.
그럼 float를 가지고있던 부모는 자신이 가지고 있던 자식이 float가 되버리면 이 자식은 집나간 자식이된다.
(🖐 여기서 잠깐! block이 height를 잡을때 별도의 height값을 주지않으면 요소는 자신이 가지고있는 자식들의
세로영역의 총 합을 자신을 height값으로 가진다 따라서 부모가 가지고있던 자식이 float가 되버리면 float가 집나간자식이된다.)
부모뿐만아니라 뒤에 따라오던 형제 자식들도 그 집나간 자식이 어디갔는지 알길이 없다.
빨강이한테 float: left를하게되면 노랑이가 사라졌고, 노랑이는 빨강이 밑으로 들어갔다.
그래서 부모도 알길도없고, 보여지지않고해서 부모는 스스로 자기자식은 2명밖에없구나...라고해서
노랑이 파랑이 두개의 길이로만, 높이가 600px에서 400px로 바뀐 것을 볼 수가있다.
#2 블록으로 신분상승
여기서 또 한가지 신기한점은 , float를 어떤 요소한테 먹이게 된다면 float먹인 요소가 Block Box로 신분이 상승한다.
Inline
Inline Block -> Block
Block
즉, 어떤 요소가 Inline이든 Inline Block이든지간에 얘네들이 float가 되버리면 Block으로 바뀐다.
div를 우선 대표적으로 알려진 inline Box인 span으로 바꾼후 본다면,
오른쪽같이 옆으로 흐르는 것을 볼 수 가 있는데,
빨강이 한테 이제 float:left를 하게되면 display : inline에서 display : block으로 자동으로 바뀌게 된다는 것을 확인 할 수 있다.
그럼 block box가 할 수 있던 능력을 우리가 다 쓸 수 있다는 뜻일까? 맞다.
따라서 width, height, padding, border, margin 모두 다 사용 할 수 있다.
따라서 float를 사용해서 block이 되니까, width, height를 주어 변화되는걸 확인 할 수 있다.
#3 길막을 못해 슬픈 블록아!
근데 이렇게되면 Block의 특성인 길막을 하지 못한다. 즉, 약간 하자가 있는 Block이된다.
🖐(잠깐) 다시 한 번 살펴보자!
Block이 길막을 하는데 방법이 2가지 있었다.
1번,
별도의 width값이 선언되지 않은경우, width = 부모의 content-box만큼 자동으로 100% 늘어난다.
근데 float가 되면 그렇게 되지 못한다.
자 이제 직접 눈으로 확인해보자!
빨강이한테 float:left를 주었더니 사이즈가 자신이 가지고있는 콘텐츠 크기만큼만 줄어든것(쉽게생각해서 붕~뜨기위해서 자기가 가지고있는것만큼 늘어나고 줄어든다고 생각하자)을 확인 할 수있다.
즉, float를 하면 실제 콘텐츠만큼 딱 붕띄게 되는것이다
따라서 display값이 아무리 block으로 바뀐다할지라도 막 늘어나는 깡패같은 block블럭은 아니라는 의미이다.
2번,
따로 width를 선언한 경우, 남은 공간은 margin으로 자동으로 채운다고 했는데, float가 되면 이또한 일어나지 않는다.
이렇게 자동으로 생기는 margin이 사라져야만 옆에 빈공간이 생기게되고,
빈공간이 생겨야 다른 float된 친구들도 옆으로 나란히 배치가 가능해진다. 그냥 당연한거라고 생각하기!
와장창의 예시 :
3개 자식 모두가 float라면, 자식 모두가 집을 나가버려서 부모는 height가 0이 되버렸다.
그럼 형제요소로 other을 주어서 확인을해보자.
아까 부모의 height가 0이 되버렸다. 즉, 영역차지를 아무것도 안하게된다.
그럼, other입장에서는 앞에 형 인 parent가 있는데, 형이 height가 0이다. 그럼 형이 있으나마나인 것이다.
그럼 빈공간으로 인식을해서 쭉~ 위로 올라가는 것이다.
#4 플로트, 나만 볼 수 있어요(feat.인라인)
float가 일어나면 block Box들은 float된 요소를 없는Box로 취급을한다.
하지만, text나 image같은 inline의 성격을 가진 애들은 집나간 float의 존재를 기가막히게안다.
즉, other같은경우는 형이 없다고 쭉~ 올라갔다.
근데, other안에있던 콘텐츠들은 "어? 여기 float가 됐는데?"라는것을 기가막히게 안다.
그래서 그 피한 자리로 흐르게되는것이다.
우리가 float를 사용하면 다른 block요소들은 그 float된 block요소들을 잡을 수 없지만 !
그 block안에 있는 콘텐츠 들은 여전히 float된 요소들한테 영향을 받고있다.
따라서 Layout이 와창창 무너지고있다.
float는 복잡하고 , 하자도 많은 애라서, 요즘에는 거의 안쓰는게 사실이다.
하지만 이것을 알아야 옛날 코드를 봐도 자신있게 고칠 수 있기때문이다..
알긴 알아야한다.
How to fix it
와장창을 어떻게 잡을 수 있을까?
이는 2가지 길이있다.
1번,
Honeyful Trick 꿀이 넘쳐흐르는 첫번째 쉬운 트릭부터 알자!
overflow : hidden; / hidden과 이어 BFC에 대해서 더 자세히 살펴보기
자식이 float를 하면 부모는 집나간 자식을 찾지 못해서 쪼그라 들게 되는데 0이 되어버린다....
근데 부모한테 overflow : hidden을 주게 된다면 부모가 집나간 자식을 그냥 찾아버린다.
따라서 바로 위의 와장창되었던 부분에 있어 overflow : hedden을 주어 집나간 자식들을 다 찾고,
자신이 가지고 있는 자식들의 합인 세로영역 400px까지 잘 먹은것을 확인 할 수 있다.
하지만 위는 잘 작동한는 법/원리를 몰라서, 그냥 사용하는것이 꺼리게되어
2번,
FM방법인 2번째 방법을 사용한다.
Clearfix방법 -> 정석으로 Float문제 해결하기,
clear라는 속성이있는데 이 속성을 사용해서 fix한다는 뜻인것 같다.
얘는 오로지 float를 위해 망가진 layout을 고치기위해 탄생한 속성이다.
overflow : hidden;
만약 2개의 A, B인 Block요소가 있다 그런데
A한테 Float : left를 줬다고 가정하자. 그럼 집을 나가게됐다는 소리인데, 그럼 따라오는 B같은 경우에는,
A가 존재하지 않으니까 위로 올라가게된다.
근데 이런상황에서 B한테 clear : left를 주게된다면 "B야! 내가 너한테 특별한 능력을 줄꺼야. 앞으로 너 앞에 float가 된 애가 있다면 어디있는지를 파악할 수 있는 능력을줄게"라고 얘기하는 것이다.
그럼 B는 A의 존재를 알게되고, 다시 아래로 내려 가게된다.
그러면 B는 A의 위치를 정확하게 아니까 B는 float되지 않았으니 B의 위치와 사이즈에 대해서는 제대로 파악할 수 있다
그래서 부모는 별도의 height가 없는경우 자식들의 세로 영역의 합을 자식 영역의 합으로 갖는다고 했는데,
그래서 A는 집을 나가서 알지 못하지만 clear가 된 B를 기준으로해서 올바르게 전체 자식의 세로 영역을 파악할 수 있게 되는 것이다.
이 Clear는 총 3가지 값을 가질 수 있다.
left | right | both
| Clearfix | 속성(attribute) |
설명 |
| left | 앞으로 float:left된 녀석들이 앞에 있다면 그 녀석들의 위치를 정확하게 파악해서 영향받지않을꺼야! | |
| right | float:right로 ... 부터 영향을 받지 않을꺼야! | |
| both | float:right | left 둘다 ... 영향을 받지 않겠다! |
예시로 한 번 보자!
모든 요소들이 Flot가 돼서 맨 뒤 부모는 영역을 다 잡지 못하고,길을 잃은 상태이다.
그래서 레이아웃이 붕괴되기 일보직전인데, 이 붕괴를 막기위해서 새로운 요소를 임의로 만들어서
가령 div같은거를 만들어서 clear속성을주어 잡아야한다.
근데 만약 상황상 의미없는 html요소
예)<div style="clear:left"></div> 와같이 html마크업을 더럽히는건,
프론트엔드 개발자로 굉장히 자존심이 상하는 문제이다.
이때 바로 나오는것이 CSS로만 처리할 수 있는 다른방법이있다.
CSS의가상요소 Pseudo-Element 로 해결하기!
float를 잡아줄 임의의 HTML요소를 만드는 대신에 CSS로 fake요소를 만드는 것이다.
HTML에는 존재하지않는 가상요소 + clear:left
CSS로 fake요소를 만들다 라고 하는것을 우리는 흔히 CSS로 가상요소를 만든다 라는 표현을 한다.
가상요소를 만드는 것은 각 요소당 2개씩 만들 수 있다.
calss명 뒤에 ::before 혹은 ::after을 적어준다
그리고 가상요소를 사용할때 반드시 작성해야하는 css속성이 있는데, 바로 content 이다.
(display : inline으로 설정되어있음)
그럼 일반 요소처럼 다 쓸 수 있다.
따라서 앞으로 우리가 작업해야하는 방향은,
::after을 사용하여 float된 자식을 가지고있는 부모의 가장 마지막 요소를 가상요소 ::after를 추가해준후
float에 의해 붕괴된 Layout을 잡아줄 수 있도록 clear속성을 주는 것이다.
참고로 clear는 display가 block 한테만 사용가능하다.
clear: left를 한 이유는, 지금 child는 모두 다 float:left로된 애들밖에 없으니까 both를 사용할 필요는 없다.
그럼 자기가 원래 있어야 할 자리에 잘 CSS가 먹은것을 알 수가있다. 이것이 바로 clearfix이다!
결론 : float를 사용할때 중요한점,1. 내가 가로배치를 할 녀석이 누구인가를 먼저 파악하자 그리고 그 친구들한테 float를 줄것! 그리고 그 친구를 감싸고 있는 부모한테 clearfix를 해준다!
clearfix 대하여 더 알아보기
참고자료 :
최근댓글