Float

• float는 '띄우다' 라는 뜻을 가지고 있으며, 다양한 객체를 띄워서 정렬을 하는 속성을 가진다.
• float속성은 그림을 따라 흐르는 텍스트 레이아웃을 웹에서 구현하기 위해 탄생한 속성이다.
• 블록요소에게 float속성을 주게되면, 마치 인라인 블록처럼 컨텐츠 크기만큼만 잡히게 된다.
  

📌 float 속성의 문제점

• 전체를 감싸는 컨테이너가 자식 요소들이 모두 float 속성을 가질 때 자식 요소들의 높이를 반영하지 못하고 자신의 높이만큼만 보여주는 문제점이 있다!

• float속성을 주게 되면 그 요소는 부모요소와 형제요소가 인식을 하지 못하는 상태가 되기 때문에 형제요소가 침범하게 된다!
  아래 사진은 내용1이 담겨있는 div에만 float: left; 속성을 준 것이다. 두번째 박스가 첫번째 박스의 영역까지 포함하고 있는것으로 보인다!
  

이러한 현상이 일어나는 이유는 ???

브라우저는 요소들을 화면에 어떻게 보여줄지 결정하는 방법에는 여러가지가 있지만, 대표적으로 3가지가 존재한다! normal flow, float, position!
대부분의 요소들, 블록요소와 인라인 요소들을 normal flow에 따라 레이아웃이 결정된다! 하지만 float, position(absolute, fixed)를 적용하게 되면 normal flow에서 벗어나게 된다! 그리고 normal flow에 속한 요소들은 normal flow에서 벗어난 float, position 속성이 적용된 요소들을 인식하지 못하게 되는 것이다!

📌 해결 방법은?

해결 방법은 다시 BFC(Block Formatting Context)를 만들어 주는 것이다. BFC는 float 속성이 적용된 요소를 컨테이너가 다시 인식하도록 만들어준다!

1. 부모요소에 overflow; 속성 추가 (hidden, scroll)

   • 단점: 만약 hidden을 사용하고 자식요소가 부모요소를 넘게 된다면 그 부분까지 짤리게 된다

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

   • 단점: 동적이지 못하므로 비효율적

3. clear 속성 사용

   • clear 요소는 형제요소에 사용해줘야한다!
   • 이 속성을 주게되면 '어? 너 거기있었구나?' 처럼 다시 float 처리된 요소들을 인식하게 된다!
   • 기본적으로 text들은 floating된 요소들을 알아본다!
     
     위 그림에서는 현재 내용2가 들어있는 박스가 내용1의 박스를 인식하지 못한다. 이러한 상황에서 내용2의 박스에 clear: both; 속성을 주게 된다면 내용2의 박스가 내용1의 박스를 인식하게 되고 블록요소이므로 아래로 다시 떨어지게 된다!
     

4. clear-fix 방법
   CSS의 ::after 가상요소로 해결한다! 부모 요소에 가상으로 마지막 child 요소를 덧붙여 부모요소가 자식요소들을 인식하게 하는 방법이다!
   가상요소는 기본적으로 인라인속성을 지니고 있기 때문에 display block 을 사용해주도록 하자!
   

5. BFC를 만드는 여러가지 방법
   https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

   https://www.w3.org/TR/CSS21/visuren.html#normal-flow