[css] float

float는 content들을 어떻게 배치고 자리 잡을지 세팅한다

둥둥 떠다닌다는 의미!

 

left - element를 컨테이너의 왼쪽으로 float

light - element를 컨테이너의 오른쪽으로 float

none - float 안한다 (디폴트) , 이미지도 텍스트의 하나처럼 배치된다

inherit : 부모의 float 값대로 동작

 

*float 되면 float 한 것끼리 inline처럼 배치된다

 자신이 float 되면 주변의 다른 element들의 content는 그 주변으로 배치된다

 

 

 

clear

clear가 적용된 element

float가 어떻게 적용될지를 지정한다

none: float 허용

left: 왼쪽으로 float 허용 안한다

right: 오른쪽으로 float 허용 안한다

inherit: 부모의 clear값

 

<div style="clear: right"></div>

clear를 left만 하면 왼쪽건 독립, 오른쪽꺼는 영향이 간다 고로 right도 하면 된다

 

 

<div style="clear:both"></div>

양쪽 다 clear 적용.

 

 

float를 하면 컨테이너의 height가 0가 된다(배경색을 넣으면 없어진다.) 이 때 height을 살릴 방법이 두가지 있다

1. clear

컨테이너 div 안에 clear:both를 지정한다

 

2. overflow: auto

컨테이너 안에 overflow:auto를 지정한다