Float
-
float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정한다.
-
왼쪽 혹은 오른쪽으로 정렬이 되는 특성 덕분에 현재는 아래 코드와 같이 블록 박스 요소를 정렬하는 가장 기본적인 방법으로 사용되고 있습니다.
float : none; float: left; float: right;
블록 박스 태그 vs float 속성 태그
블록 속성 태그는 아래와 같이 가로폭 전체의 넓이를 가지는 속성을 가지고 있습니다. 
1번째에 float:left 속성을 준 그림은 다음과 같습니다.
- float 된 요소들의 넓이의 합이 그들을 감싸는 컨테이너의 넓이보다 커지면 순차적으로 아래로 떨어지는 모습을 보입니다.
- 과 같은 inline 요소에 float 속성을 적용하면 display 속성값이 자동으로 block 으로 바뀌게 되는 것 입니다. 때문에 float 속성이 적용되면 inline 요소도 width, height, margin, padding 속성값을 자유로이 사용할 수 있게 됩니다.
이상하고 재미있는 float 속성
-
자식 요소들이 모두 float 속성을 가질 때, 컨테이너 요소가 자신의 높이에 자식 요소들의 높이를 반영하지 못한다는 점입니다.
-
브라우저는 요소들을 화면에 어떻게 보여줄지 결정하는 여러가지 방법이 있습니다. 그 중에서 대표적으로 세 가지 방법이 존재합니다. 바로 normal flow, float, position 이 있습니다.
-
대부분의 요소들 즉, 블록 레벨 요소와 인라인 요소들은 normal flow 에 따라 레이아웃이 결정됩니다. 하지만 float, position(absolute, fixed) 의 방법을 사용하면 normal flow 에서 벗어나게 됩니다. normal flow에 속한 요소들은 normal flow에서 벗어난 float, position 속성이 적용된 요소들을 인식하지 못합니다.
해결 방안
-
부모 요소에 overflow 속성을 추가합니다.
- overflow은 Block-Formatting-Context(줄여서 BFC)를 생성합니다. BFC는 float 속성이 적용된 요소를 컨테이너가 인식하도록 만들어줍니다. 그렇기 때문에 컨테이너 요소에 overflow:hidden; 혹은 overflow:scroll; 등 overflow:visible; 을 제외한 overflow 속성을 추가하여 해결합니다.
-
부모 요소의 높이 값을 직접 지정해줍니다.
- 강제로 부모에 높이를 주어 늘리는 것이므로 좋은 방법은 아닙니다. 만약 자식 요소의 높이가 변경 되었을 경우 혹은 자식 요소가 추가되어 부모 요소의 높이 수정이 불가피한 경우마다 부모의 높이를 변경해야 하므로 비효율적입니다. -
clear 속성 사용
- float 이 사용된 요소의 바로 다음 형제 요소에 clear 속성을 사용합니다. clear 속성은 left, right, both 세 가지 값을 가지며 float이 사용된 요소가 정렬된 방향에 따라 적절히 사용해 주시면 됩니다.
-
clear-fix 방법
- CSS의
::after가상요소로 해결합니다. 부모 요소에 가상으로 마지막 child 요소를 덧붙여서 부모 요소인 wrap이 자식 요소들을 알아보게 하는 방법입니다. 이러한 방법을 clear-fix 라고 합니다. 이렇게 하면 부모 요소와 이후에 float요소를 따라오는 현상까지 모두 다 해결됩니다.display:block;대신display:table;을 사용하기도 합니다.
- CSS의
-
이 외에도 BFC를 만들어내는 여러가지 방법들을 사용할 수 있습니다.
Block Formatting Context
웹페이지 화면에 CSS를 랜더링하는 과정의 한 부분으로,
block 레벨 요소들이나 float 된 요소들이 서로 상호작용 하여 화면에 보여지게 되는 방법(block formatting)을 결정하는 구역(context)을 말합니다.BFC 생성
-
<html>요소를 사용했을 때 -
float: left, right
-
overflow : visible 을 제외한 속성값(auto, hidden, scroll)을 사용했을 경우
-
display: table-cell, inline-block, flow-root
-
position:absolute, fixed 등등
BFC가 생성되면 다음과 같은 작용을 합니다.
- 내부, 외부 float을 해제합니다.
- 마진 컬랩싱 (margin collapsing) 현상을 막습니다
