float(overflow와 bfc를 곁들인..)

썸네일

 

🚀 Float

---

1. float이란?

위 사진 처럼 그림이나 이미지를 따라 흐르는 텍스트 레이아웃을 구현하기 위해서 탄생한 속성이다.

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

 

2. 그럼 저런 용도로만 쓸까?

 

사실은 저렇게 사용도 하지만 주로 블록 박스 요소를 정렬하는 가장 기본적인 방법으로 사용되고 있다.

 

- float : left

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

 

- float : right

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

 

3. 요렇게 정렬을 하는데 용이하게 사용할 수 있으나 큰 문제점이 하나 있다. 아들, 딸에게 float 속성을 각각 주면 어떻게 될까?

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

 

엥?? 부모요소의 border 내부 공간이 쪼그라 들었다.. 후;; 뭐야 이거 왜 이래;; 당황할 수 있다. 그렇지만 당황하지 않고 이게 왜 이렇게 되는지 한 번 araboja

 

4. 이런 현상이 일어나는 이유

브라우저는 요소들을 화면에 어떻게 보여줄지 결정하는 여러가지 방법이 있는데 그 중 대표적인 세 가지 방법이 normal flow, float, position 이다.

 

대부분 블록 레벨 요소와 인라인 요소들은 normal flow에 따라 레이아웃이 결정되는데 float, position(absolute, fixed) 방법을 사용하면 normal flow에서 벗어나게 되는데, 이 때 normal flow에 속한 요소들은 float, position 요소들을 인식하지 못하게 돼서 저런 현상이 발생이 되는 것이다.

 

아니 어떻게 해결해요 그럼 꼴보기 싫은데!!! 바로 해결점 araboja

 

해결방법

1. 부모 요소의 높이 값을 직접 지정해준다.

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

 

하지만 이 방법은 좋은 방법은 아니다. 유지보수 측면에서 별로 좋지 않다.

 

2. clear 속성 사용

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

 

clear는 형제끼리의 문제를 해결하는 방법이다. 그렇다면 부모요소와 자식간의 문제를 해결할 방법은 없을까?? 없긴 바로 araboja

 

3. clear-fix 방법(clear를 사용하는 것이지 clear-fix라는 속성은 없음)

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

 

부모 요소에 가상요소인 ::after 요소로 해결한다. 부모 요소에 가상으로 마지막 child 요소를 덧붙여서 부모 요소인 body가 자식 요소들을 알아보게 하는 방법이다. 

 

4. 그리고 대망의 overflow

 

See the Pen Untitled by alstjr5949 (@alstjr5949) on CodePen.

 

overflow:scroll, overflow:visible 을 써도 된다. 여기서 잠깐 overflow:hidden 은 마진병합도 해결해주고, float 문제도 해결해주고!!!

 

뭐지 overflow는 만능인가?? 생각할 수 있지만 이건 block format context 즉 bfc 때문이다. bfc는 웹 페이지를 렌더링하는 시각적 css의 일부로서, 블록 박스의 레이아웃이 발생하는 지점과 플로팅 요소의 상호작용 범위를 결정하는 범위이다. bfc는 하나의 루트요소 즉 작은 html이 생겨난다고 생각하면 편하다.

 

종류나 더 자세한 설명은 https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Block_formatting_context 와 https://www.w3.org/TR/CSS21/visuren.html#normal-flow