float

mdn에 어떻게 정의 되어 있냐면

float은 한 요소가 보통 흐름으로부터 빠져나와서 텍스트 및 인라인 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정한다.

여기서 보통의 흐름이란 위에서 아래, 좌에서 우로의 방향을 얘기하는데 이러한 흐름을 벗어나 요소의 배치를 가능하게 해주는 CSS속성이 float이다.

float속성을 이용해 레이아웃 배치에 사용된다.

float의 대표적인 값은 right, left, none 등이 있다.

MDN float 예제 float값에 따라 어떻게 배치가 달라지는지 볼 수 있다.

대표적인 float 값들

• none: 기본값
• left: 요소를 왼쪽으로 띄움
• right: 요소를 오른쪽으로 띄움

위 이미지는 글과 float속성을 가진 이미지와의 배치에 대한 이해를 돕기 위해가져왔다.

첫번째 none속성은 이미지가 하나의 줄 영역을 차지하고 글이 상하로 나누어 졌다.
보통의 흐름에 맞게 이미지가 왼쪽에서부터 위쪽에서부터 배치된 것을 볼 수 있다.

두번째 left값을 가진 이미지는 첫번째와는 다르게 마치 inline처럼 
해당 컨텐츠의 크기만큼 영역을 차지하고 이미지 옆에 글까지 채워져있다. 
보통의 흐름을 벗어나 이미지와 글이 배치된 것을 볼 수 있다.

세번째 right값을 가진 이미지는 보통의 흐름과는 다르게 오른쪽에 배치된 것을 볼 수 있고
두번째와 마찬가지로 inline처럼 컨텐츠의 영역만큼 차지한다.

float의 문제점

float를 이용한 레이아웃을 작성할때, 부모 요소가 자식 요소의 크기를 반영하지 못하는 문제가 발생한다.

예를 들면,
자식요소에 float을 설정하면 부모요소의 높이가 초기화 되어 사라지게 된다.

이러한 문제를 해결하기 위한 몇가지 방법들이 있다.

float 문제 해결 방법들

1. float된 요소의 부모태그에 강제로 높이 값을 지정한다.
   반응형시 자동 높이 값 설정 불가하단 단점이 있다.

2. float된 요소의 부모태그에 overflow:hidden 또는 overflow:auto을 적용한다.
   overflow: auto 사용시 자식의 너비가 부모의 너비보다 크다면 가로 스크롤바가 생기고,
   overflow: hidden의 경우 넘치는 부분이 잘리기 때문에 사용하지 않는것이 좋다.

3. float을 가진 자식 요소의 부모 요소도 똑같이 float을 적용한다.
   반응형 웹에는 적합하지 않다는데 경험이 없어서 아직은 모르겠다.

4. float된 요소의 다음에 나오는 태그에 clear:both 를 지정합니다.
   clear:both가 적용된 요소에는 margin-top 적용 불가하다는 단점이 있다.

5. float된 요소의 부모태그에 가상요소를 만들고 해당 요소에 clear:both를 지정해준다. 대중적으로 clearfix 클래스를 부모 요소에 추가한다음 가상요소랑 같이 쓰인다.

가상요소 ::after

float된 요소의 부모태그::after{
   content:'';
   display:block || table; // block 또는 table을 사용하면 된다.
   clear:both;
}

or

// 부모요소에 clearfix 클래스를 추가한다음 css적용
// 이렇게만들면 html tag만 봐도 float을 위한 클래스인것을 알수있다.
.clearfix::after { 
  content: "";
  clear: both;
  display: table;
}

clear 속성

• clear:none // 기본 값으로 clear를 설정하지 않은 것과 같습니다.
• clear:left // 왼쪽으로 붙는 float 정렬을 취소합니다.
• clear:right // 오른쪽으로 붙는 float 정렬을 취소합니다.
• clear:both // 오른쪽 왼쪽 모두 붙는 float 정렬을 취소합니다.

---

reference
https://webdir.tistory.com/272
mdn