float 둥둥 등장-!
❗ 해당 문서는 지속적으로 업데이트 될 예정입니다.
❗ 잘못된 정보나 오류가 있으면 댓글로 편하게 남겨주세요!🥰
이미지와 텍스트를 정렬할 때 우리는 위와 같은 상황이 발생되는 걸 원치 않는다.
이런 kg받는 상황을 해결하기 위해
그림을 따라 흐르는 텍스트 레이아웃을 구현하기 위해 등장한 것이 바로
👉 float(띄우다)
float은 그림을 따라 흐르는 텍스트 레이아웃을 구현하기 위해 탄생한 속성이다.
아래 코드에서 img에 float:left 속성을 주게되면
위와 같이 이미지는 왼쪽으로 정렬이 되고, 그 다음 텍스트는 이미지를 따라 빈공간에 잘 채워지는 것을 볼 수 있다. float:left 또는 float:right으로 해당 속성을 준 요소를 왼쪽, 오른쪽에 배치할 수 있다. 이렇게 정렬을 깔쌈하게 줄 수 있다니 완전 짱이다! 끝!
...
라고 하기엔 float는 그렇게 간단한 친구가 아니다.
우선 float를 준 요소는 다른 블럭요소와 전혀 다른 차원으로 가게된다는걸 이해해야한다.
물론 우리는 브라우저상에서 float과 다음에 뒤따라오는 요소가 찰떡같이 잘 붙어있다고 생각하겠지만, float를 준 요소는 이름 그대로 둥둥 뜨게 된다. float 속성을 부여해준 이후에 온 요소는 해당 속성의 영향을 받아 둘러싼 형태가 되거나, 둥둥뜬 영역의 아래로 들어가게 된다. 물론 해당 속성이 이미지와 텍스트를 어울리게 배치하기 위해 태어났기 때문에, 다른 레이어로 간다고해서 콘텐츠가 겹치거나 하는 건 아니다.
무슨 말이냐 하면,
이렇게 정상적인, normal flow에선 집순이 블록과 집돌이 블록이,
부모요소의 보살핌을 받으며 잘 자리를 차지하고 있다.
집순이와 집돌이의 높이를 부모(분홍색 영역)이 잘 인식하고 있다는 걸 알 수 있다.
그러나, 집순이 블록에 float를 주어 집나간 밖순이 자식으로 만들어버리면,
이렇게 부모는(분홍색 영역) 집돌이만 내자식이다 하고 집돌이의 높이만 인식하게 되고,
밖순이는 float의 차원으로 가버린다. 따라서 그 붕 뜬 아래부분을 집돌이가 차지하지만, "집돌이"라는 글자는 밖순이에 가려지지 않는다. 그것이 float의 특성이기 때문!
이렇게 블록레벨과 인라인 요소들의 레이아웃을 담당하는 normal flow를 벗어난 float는 여전히 normal flow에 있는 부모요소가 float으로 떠버린 자식을 알아보지 못하기 때문에 문제가 발생하게 된다.
이렇게 둘다 집나간 자식을 인식하지 못해서 부모 영역의 높이가 사라지기 때문이다.
이를 해결하는 방법은 다양하다.
1. 부모에게 높이값을 설정해주면 되지 않나?
부모가 자식의 높이를 인식못해서 생기는 문제라면 간단히 부모에게 height값을 주면 될 것 같다. 하지만 이것은 근본적인 해결책이라고 할 수 없는 것이,
이렇게 부모보다 높이가 큰 자식들이나, 자식들이 많아졌을 때 높이를 또 조정해줘야하기 때문이다.
2. 부모요소에 block-formatting-contexts를 생성할 수 있는 속성 overflow(visible 제외)을 넣어줄 것.
하지만 이 또한 width,height가 정해진 부모요소의 경우 overflow:hidden을 사용하게 되면 넘처난 자식이 짤리므로 그렇게 좋은 방법은 아니다.
3. clear 속성사용
clear은 이 float 속성을 사용시 주변으로 컨텐츠가 흐르듯이 배치하는 것을 해제하기 위한 전용 속성이다. float이 사용된 요소가 정렬된 방향에 따라 clear : left는 float : left를 , clear : right는 float : right를, clear : both는 양 쪽 모두의 float을 해제한다. clear속성 이후 float는 영향을 끼치지 않게 된다.
이렇게 float요소 다음에 오는 형제요소에게 clear속성을 부여 하게되면, float속성을 지닌 요소를 형제가 인식하게 되어, 부모요소가 집나간 자식의 높이까지 인식한 것과 같은 결과를 낳는다.
4. clear-fix
위 3번처럼 하려면 , clear 속성을 주기 위한 또다른 div를 불필요하게 만들어야 하는 상황이 발생할 수 있다. 따라서 부모요소의 가상으로 자식 요소를 덧붙여, clear을 주는 방법이다.
.wrap::after {
content:'';
display:block;
clear:both;
}이 방법은 불필요한 태그를 만들지 않을 수 있어 현업에서 가장 많이 사용된다고 한다.
Q. 아니 보니까 display:inline-block이랑 다를게 없는데?
float을 적용한 속성은 인라인 요소처럼 작용하고 , 다음 요소는 인라인 블록처럼 행동한다. 하지만 display:inline-block을 사용하면, 블럭들 사이에 여백이 생긴다. 코드에서의 엔터들이 여백으로 나타나기 때문에, 코드들을 지저분하게 다 붙여쓰거나 , font-size:0을 주어 하나하나 바꾸던가 해야한다. 그냥 마음편하게, 수평정렬은 float:left,right로 진행하자.
Q. 걍 플렉스 쓰면 안대냐?
flex는 감싸줘야한다는 단점이 있다. float같은 경우는 자신과 형제요소, 자신과 부모요소와의 관계 등 외부적인 요소들에 대해서 관계를 설정하지만, flex는 flex요소 안에있는 자식들을 배치하는 요소기 때문에 감싸주는 태그가 반드시 필요하다. float가 html이 길어지지도 않고, 브라우저 호환성 면에서도 좋으니 모두 float하자.
float
flex
깨달은 점
👉 아직 flex를 제대로 배우진 않았지만, CSS를 배우는 입장에서 "정렬은 아묻따 flex아냐??" 라고 생각해왔는데 현업에서 아직까진 많이 사용이 되지 않는다고 하셔서 좀 놀라웠다.
👉 float를 배우며 블록 포멧팅 콘텍스트에 대해 좀 더 이해가 필요하다고 생각이 들었다. 아직까지는 html처럼 모든 요소들을 인식할 수 있는 새로운 블록 쌓임 맥락이 형성된다 정도로 이해된다.
다음에 해보고 싶은 시도
👉 블록 포멧팅 콘텍스트에 대해 이해하기 쉬운 블로그 글 작성하기!
👉 float 사용해서 과제 정렬해보기
Author And Source
이 문제에 관하여(float 둥둥 등장-!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@samkong/float저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
