둥둥 float로 부유해보기🚣‍♂️

float란..?

이미지 옆에 글이 자연스럽게 흘러가는 형태로 만들기 위해 고안된 속성.

float의 value

• left (float 설정을 준 요소가 왼쪽으로 "뜨게" 만들어줌).
• right (float 설정을 준 요소가 오른쪽으로 "뜨게" 만들어줌.)

float의 원리

1. 요소에 float를 주게 되면 그 요소는 뜨게 된다.
2. 요소는 공중에 뜨기 때문에 밑에 있던 요소는 원래 요소가 있던 자리를 차지한다.
3. 여기서 float된 요소 밑으로 밑에 있던 요소가 들어가 곂치는 것을 방지하기 위해 float된 요소만큼 공간을 확보해둔다.(text 한정)

clear: both;

float 특성상 float된 요소보다 밑에 있던 요소가 작으면 그 다음 요소들 또한 float의 영향을 받게 된다.
다음 요소들이 그 영향을 받지 않게 만들고 싶다면 clear: both;를 통해 float 속성을 해제 시킬 수 있다.
블럭에만 영향을 받는다.

1. 요소에 float를 주게 되면 그 요소는 뜨게 된다.
2. 요소는 공중에 뜨기 때문에 밑에 있던 요소는 원래 요소가 있던 자리를 차지한다.
3. 하지만 그 밑에 있던 요소 또한 함께 float의 영향을 받는게 싫어 그 요소에 clear: both;를 주게 된다면
4. 그 밑에 있던 요소바로 위에 clear: both;라는 장벽을 세워 그 밑에 있던 요소가 올라가지 못하게 하는 것과 같다고 생각하면 된다.

float 속성 해제

• 각각의 요소들에 float를 부여한다. 다만 모든 요소들에게 float속성을 부여하는데 무리가 있다는 단점이 있다.
1. A박스에 float: left; 선언 - 기본값이기 때문에 자리는 변동 없지만 공중으로 뜨게 된다.
2. A박스가 떠있기 때문에 A박스의 자리는 비어있다고 생각하고 B박스와 C박스는 A박스 자리를 차지한다. - 현재 A박스와 B박스는 곂쳐진 상태
3. B박스에게도 float: left; 선언 - B박스가 뜨게 되면서 A박스를 인지하게 되고 A박스 옆으로 뜬다.
4. 2번과 마찬가지로 C박스 또한 A박스와 B박스를 인지하지 못해 위로 올라간다. - A박스와 C박스가 곂쳐있는 상태
5. 마지막으로 C박스에게도 float: left;를 부여하면 C박스가 A박스와 B박스를 인지하면서 B박스 옆으로 뜨게 된다.
• clear: both;
• overflow: auto;
• :after
1. ul이라는 부모에 li라는 자식이 3개가 있다고 가정해본다.
2. li에게 모두 float: left를 준다.
3. li들은 한 줄로 왼쪽 정렬을 한다.
4. li들이 모두 떠버렸기 때문에 ul은 안에 자식들이 없다고 생각해 사이즈가 줄어들게 된다.
5. 이때, ul에게 li들이 있다는 것을 인지시키려면??????
• ul의 종료태그에 clear를 부여할 수 없기 때문에 이전에는 li를 하나 더 만들어 clear: both;의 장벽을 세웠다.
• 의미없는 요소를 생성하는 것은 경제적이지 못한 방법이기 때문에 :after를 이용한다.
1. .parent:after { clear: both; } ---> 작동되지 않는다.
   (after는 컨텐츠를 쓰기 위해 존재하기 때문에)
2. .parent:after { content: ""; clear: both; } ---> 작동되지 않는다.
   (clear는 블럭속성에서만 작용하는데 content는 문구를 쓰기위한 inline 속성이다.)
3. .parent:after { content: ""; display: block; clear: both; } ---> 작동 완료!!