[CSS] Float

float는 block 요소들을 가로배치하기 위해 쓰입니다.

.box{
	float: left;
}

.box1{
	float: right;
}

 

 

Float를 사용하면 무슨 일이 일어날까

 

첫 번째 변화: 부모가 float된 자식을 찾지 못합니다.

 

float 하기 전 세 block요소의 상태

float를 적용하기 전 세 가지 색상의 block 요소가 있다고 합시다.

빨간색 요소에 float를 적용해보겠습니다.

float를 적용하면 위와 같이 빨간색 요소가 붕 뜨게 됩니다.

그러면 parent는 떠 버린 빨간색 자식 요소를 찾을 수 없게 됩니다.

 

빨간색 요소가 사라진 공간을 비었다고 생각하고 파랑과 초록 요소가 앞으로 당겨집니다.

앞으로 당겨진 파랑과 초록

앞으로 당겨진 뒤 height 값을 정해주지 않은 parent의 height는 block인 자식들의 height 합에 따라 정해지므로

크기가 줄어들게 됩니다.

크기가 줄어든 parent

마찬가지로 파란색과 초록색에도 float를 적용시키면 

전부 float

모든 자식을 잃어버린 parent는 height가 없기 때문에 사라집니다.

이렇게 되면 parent가 아예 사라졌기 때문에 레이아웃이 무너지게 됩니다.

 

 

 

 

두 번째 변화: float를 적용시키면 자동으로 block으로 변합니다.

display가 inline, inline-block, block 어떤 것이든 float를 적용시키면 display: block이 되어버립니다.

 

 

 

세 번째 변화: block으로 변했지만 길을 막는 속성이 사라집니다.

• width가 자동으로 부모 content-box의 100%로 설정되지 않습니다.
  • 자신의 content width 만큼만 차지하게 바뀌어 버립니다.
• 남은 공간을 자동으로 margin으로 채우던 성격도 사라집니다.

 

 

 

네 번째 변화: block들에게는 인식되지 않지만 inline들에게는 인식됩니다.

float가 사용되면 block box들은 float된 box를 없는 취급하고 첫 번째 변화에서 보는 것 처럼 행동합니다.

하지만, text나 img와 같이 inline 속성을 갖고 있는 것들은 float를 인식하기 때문에 레이아웃이 제멋대로 놀게 됩니다.

 

 

 

 

변화들을 고치는 두 가지 방법

overflow: hidden;

float된 자식을 갖고 있는 부모에게 overflow: hidden을 주면 아래와 같이 돌아옵니다.

부모에게 overflow: hidden; 을 적용

 

 

 

clearfix (추천 방식)

clear는 오로지 float로 인해 망가진 속성을 고치기 위해 만들어진 녀석입니다.

clear: left 

float: left 의 영향을 받지 않게 하겠다. 의 의미로 사용됩니다.

clear:left

clear:left가 들어간 블록이 float:left된 블록을 인식합니다.

때문에 parent가 직접 float:left된 block의 위치를 알지 못해도 height를 계산할 수 있게 됩니다.

 

 

보통 pseudo-element와 함께 사용됩니다.

.box::after{
	content:"";
    display:block;
    clear:left;
}

 

*pseudo-element

::before과 ::after를 이용하여 기존 요소의 앞, 뒤쪽에 새로운 HTML요소를 추가한 것 처럼 작동합니다.

::before, ::after