CSS float 속성에 대해서
float은 원래 ‘뜨다’ 라는 의미이며, css에서는 웹페이지에서 레이아웃의 흐름과 별개로 컨텐츠의 위치를 지정하는데에 사용되는 속성이다. 예를 들어 이미지가 화면의 오른쪽에 부유하도록 설정 하고싶을때는 float: right 값을 사용하면 된다.
float속성은 다음의 속성값들과 함께 사용할 수 있다.
left - 요소가 왼쪽에 떠 있도록 설정
right - 요소가 오른쪽에 떠 있도록 설정
none- float속성의 기본값. 요소는 아무런 효과도 받지 않음
inherit - 요소는 부모의 float 값을 상속
left, right 속성값을 준 이미지를 텍스트와 함께 배치하면 위처럼
텍스트가 이미지를 감싼 형태가 출력된다.
float속성에서 발생하는 문제점
float 속성을 가진 요소는 부모가 높이를 인지할 수 없어 부모의 영역을 벗어나곤 한다. 이러한 float의 문제점을 해결하려면 clear라는 속성이 필요하다. clear는 float 요소 옆에 채워지는 요소들에게 적용하는 속성이다.
문제 해결방법
1. 바깥 div에 overflow: hidden값을 준다.
2. 바깥 div도 float시킨다. 그러면 자식의 float 높이를 인지하여 그만큼 높이를 차지하게 된다. 하지만 이 방법을 사용하면 float이 되어버려 블럭 요소의 성질이 없어지게된다. 그렇다면 width를 100%로 추가해야한다.
이미지 출처
https://www.1keydata.com/css-tutorial/float.php
https://flaviocopes.com/css-floating-clearing/
