float 속성의 특징과 해제 방법

📑 float 속성의 특징

• 어떤 요소가 기존에는 웹 문서에서 자리 한부분을 차지하고 있다가 float 속성을 사용한다면 어떻게 될까?

• 해당 요소는 웹문서 위로 붕 뜨게 되어 더이상 웹 문서에서 자리 차지를 하지 않게 된다.
  이렇게 되면 이 요소의 부모요소는 자식요소가 위로 떠버렸기 때문에 없는걸로 인식하고 어디까지 float속성이 적용되고있는지 알지 못해 높이를 가늠하지 못하여 결국 높이가0으로 되어버리는 현상이 발생하게 된다.
  결국 이 다음 요소도 위로 올라가게 되고 레이아웃이 깨지게 된다.

• 아래 데모는 부모요소 안에 자식요소 2개를 float 속성을 사용하여 각각 좌, 우로 정렬하는 것을 보여준다.

1. [좌우로 정렬] 버튼을 눌러 float 속성을 적용하게 되면 부모요소인 노란색 박스는 안에 자식요소가 없는 걸로 인식하게 되고 높이를 가늠하지 못하여 결국 테두리만 남을뿐 높이가 0이 되어버린다.
2. 이번에는 [float 해제하기] 체크박스를 체크하여 float속성을 해제하고 위의 버튼을 다시 눌러보자.
3. 부모요소에서 float 을 해제하였으므로 어디까지 float 이 적용되는지 알 수 있게 된다. 그래서 노란색 박스는 딱 자식요소 크기만큼 높이가 설정된다.
4. 다시 말하면, 자식요소에 float 속성을 적용하면 다시 속성을 해제하기 전까지는 부모요소가 자식 요소가 어디까지 float 속성이 되어있는지 모르기 때문에 얼마나 높이를 가져야 하는지 모른다. 그래서 없는 것처럼 쳐버리게 된다.
5. 만약 float 속성을 해제한다면 부모 요소는 어디까지 속성이 적용되었는지 알기 때문에 높이를 가늠할 수 있게 된다.

📖 float 속성을 해제하는 여러가지 방법들

• float 속성을 해제하는 방법은 여러가지가 있다.

  1. 부모요소에 overflow: hidden 을 사용한다.

     • 단점 : overflow: hidden 이 적용되었으므로 이 부모요소는 컨텐츠를 박스 외부로 표현하지 못한다.

  2. 부모요소에 높이값을 지정한다.

     • 단점 : 반응형 사이트 제작 시, 높이 값이 고정되어 반응형이 되지 못한다.

  3. 인접한 요소(바로 다음 요소)에 clear: both 을 사용한다.

     • 단점 : clear: both 가 적용된 요소에는 margin-top 이 적용되지 않는다.

  4. 부모요소에 가상요소(::after)를 생성하고, 가상요소에 clear: both 를 사용한다.

     • float을 해제시키는 방법 중 가장 권장하는 방법이다.