float란..?
이미지 옆에 글이 자연스럽게 흘러가는 형태로 만들기 위해 고안된 속성.
float의 value
- left (float 설정을 준 요소가 왼쪽으로 "뜨게" 만들어줌).
- right (float 설정을 준 요소가 오른쪽으로 "뜨게" 만들어줌.)
float의 원리
- 요소에 float를 주게 되면 그 요소는 뜨게 된다.
- 요소는 공중에 뜨기 때문에 밑에 있던 요소는 원래 요소가 있던 자리를 차지한다.
- 여기서 float된 요소 밑으로 밑에 있던 요소가 들어가 곂치는 것을 방지하기 위해 float된 요소만큼 공간을 확보해둔다.(text 한정)
clear: both;
float 특성상 float된 요소보다 밑에 있던 요소가 작으면 그 다음 요소들 또한 float의 영향을 받게 된다.
다음 요소들이 그 영향을 받지 않게 만들고 싶다면 clear: both;를 통해 float 속성을 해제 시킬 수 있다.
블럭에만 영향을 받는다.
- 요소에 float를 주게 되면 그 요소는 뜨게 된다.
- 요소는 공중에 뜨기 때문에 밑에 있던 요소는 원래 요소가 있던 자리를 차지한다.
- 하지만 그 밑에 있던 요소 또한 함께 float의 영향을 받는게 싫어 그 요소에 clear: both;를 주게 된다면
- 그 밑에 있던 요소바로 위에 clear: both;라는 장벽을 세워 그 밑에 있던 요소가 올라가지 못하게 하는 것과 같다고 생각하면 된다.
float 속성 해제
- 각각의 요소들에 float를 부여한다. 다만 모든 요소들에게 float속성을 부여하는데 무리가 있다는 단점이 있다.
- A박스에 float: left; 선언 - 기본값이기 때문에 자리는 변동 없지만 공중으로 뜨게 된다.
- A박스가 떠있기 때문에 A박스의 자리는 비어있다고 생각하고 B박스와 C박스는 A박스 자리를 차지한다. - 현재 A박스와 B박스는 곂쳐진 상태
- B박스에게도 float: left; 선언 - B박스가 뜨게 되면서 A박스를 인지하게 되고 A박스 옆으로 뜬다.
- 2번과 마찬가지로 C박스 또한 A박스와 B박스를 인지하지 못해 위로 올라간다. - A박스와 C박스가 곂쳐있는 상태
- 마지막으로 C박스에게도 float: left;를 부여하면 C박스가 A박스와 B박스를 인지하면서 B박스 옆으로 뜨게 된다.
- clear: both;
- overflow: auto;
- :after
- ul이라는 부모에 li라는 자식이 3개가 있다고 가정해본다.
- li에게 모두 float: left를 준다.
- li들은 한 줄로 왼쪽 정렬을 한다.
- li들이 모두 떠버렸기 때문에 ul은 안에 자식들이 없다고 생각해 사이즈가 줄어들게 된다.
- 이때, ul에게 li들이 있다는 것을 인지시키려면??????
- ul의 종료태그에 clear를 부여할 수 없기 때문에 이전에는 li를 하나 더 만들어 clear: both;의 장벽을 세웠다.
- 의미없는 요소를 생성하는 것은 경제적이지 못한 방법이기 때문에 :after를 이용한다.
- .parent:after {
clear: both;
} ---> 작동되지 않는다.
(after는 컨텐츠를 쓰기 위해 존재하기 때문에)
- .parent:after {
content: "";
clear: both;
} ---> 작동되지 않는다.
(clear는 블럭속성에서만 작용하는데 content는 문구를 쓰기위한 inline 속성이다.)
- .parent:after {
content: "";
display: block;
clear: both;
} ---> 작동 완료!!