TIL - Float

📌 Float

• 객체를 둥둥 띄워 정렬하는 것!

📌 float 속성의 문제점

• 자식 요소들이 모두 float 속성을 가질 때
  부모요소가 자식 요소들의 높이를 반영하지 못하고 자신의 높이만큼만 보여줌

💡 왜 이런 문제가?

• 브라우저가 요소를 화면에 보여주는 대표적인 세가지 방법
  normal flow, float, position
  
• 대부분의 요소들은 normal flow에 따라 레이아웃이 결정되는데 float, position을 사용할 경우 normal flow에 벗어나게 됨.
• normal flow에 속한 요소들은 normal flow에서 벗어난 float, position 속성이 적용된 요소들을 인식하지 못함.

📌 해결 방법?

1. overflow 속성 부모요소에 추가

• overflow은 bfc ; block-formatting-contexts를 생성.
  bfc는 float 속성이 적용된 요소를 컨테이너가 인식하도록 만들어줌. 즉 부모요소가 자식요소의 float를 인식하게 됨.
  때문에 컨테이너 요소에 overflow:visible; 을 제외한 overflow:hidden; 혹은 overflow:scroll; 등 overflow 속성을 추가하여 해결 가능.

• 단점)
  부모요소에 컨텐츠가 있는 경우, 자식요소가 부모요소를 넘어가는 경우 hidden이면 짤리고 auto하면 스크롤이 생김. 넘쳐흐르는 디자인이라면 overflow 속성 사용불가 -> bfc요소 만드는 다른 방법인 position:absolute, display:inline-block 사용

2. 부모 요소 높이 값 직접 지정

• 너무 원시적인 것 아닐까.. 유지보수 생각하면 아득..

3. clear 속성 사용

• clear 속성은 바로 앞의 형제 요소가 float받았을 때 따라갈지 안갈지 정함
• float 사용된 요소 바로 다음 형제 요소에 clear 속성 사용

• 왼쪽도 오른쪽도 따라가지 않겠다 clear:both;

4. clear-fix 방법

• 부모요소에 가상요소로 clear:both;를 설정하여
  부모요소가 자식 요소를 알아보게 하는 방법
• display:block;대신 display:table;을 사용하기도 함.
• after를 자식으로써서 부모 자식을 해결하고
  clear:both를 넣어 형제관계 까지 해결

.wrap::after {
	content:'';
	display:block;
	clear:both;
}

📌 알고가자

- 블럭요소 수평 나열엔 inline-block? float?

• display:inline-block 사용하면 블럭들 사이에 여백이 생기는데 이는 코드에서 엔터들이 여백으로 나타나기 때문이다. 이를 없애기 위해선 코드를 다 붙여써야한다.(또는 font-size:0을 주어 하나하나 바꾸던가 해야한다.) 때문에 inline-block보단 float 사용하여 수평정렬을 하는 것이 좋다.

- float속성은 margin-top이랑 같이 쓰자!

• vertical-align이 인라인에 잡아먹히기 때문에 float속성에다는 margin-top으로 조절해준다.

- flex와 float의 차이점?

• flex는 flex요소 안에 있는 자식들을 배치하는 요소기 때문에 감싸주는 태그가 반드시 필요하다. 즉 반드시 부모가 필요하기 때문에 html 태그 양이 늘어난다.
• 반면 float는 부모, 형제요소를 통해 해결이 가능하기에 html이 길어지지도 않고, 브라우저 호환성 면에서도 좋다.

- 블록서식문맥 만드는 방법

• display:inline block
• float
• overflow가 visible이 아닌요소

• 컨테이닝블록은 포지션을 가진 자식입장에서 부모가 누군가 찾는 것이라면
  블록서식문맥은 부모입장에서 누구까지 내 블록에 포함해야하나 자식을 찾는 것
  MDN-bfc