CSS 레이아웃(float,clear,overflow속성)

float속성 - 왼쪽이나 오른쪽으로 배치하기

세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 필요.

float한 박스에 가로 사이즈를 함께 주어야 모든 구형 브라우저에서까지도 크로스 브라우징 됩니다.

 

속성 값	설명
left	해당 요소를 문서의 왼쪽으로 배치합니다.
right	해당 요소를 문서의 오른쪽으로 배치합니다.

※ h1 블록이나 인라인 요소들은 가로 사이즈 없이 float 해도 크기가 자동으로 잡힌다.

 

float를 사용하면 너비를 지정하지 않으면 너비가 없다.

단 텍스트일 경우 <br>을 사용하지 않으면 줄이 바뀌지 않고 옆으로 계속 진행되서 꽉차게 된다.

좌우 레이아웃일 경우 반드시 너비를 지정해야 한다.

= float은 좌우가 같이 늘어나지 않는것이 최대 단점

 

 

 

 

 

 

clear

float된 박스들의 바로 아래 박스에게 주변을 흐르지 않고 원래대로 배치되도록 하는 속성입니다.

즉,float을 해재시켜주는 중요한 역할을 하는데, 이 요소는 블록이어야 합니다.

속성 값	설명
left	float된 박스 중 좌측이 짧을 때 좌측의 빈 공간부터 채워 내려옴.
right	float된 박스 중 우측이 짧을 때 우측의 빈 공간부터 채워 내려옴.
both	float된 박스 중 어느 쪽도 채우지 않고 다시 한단으로 배치해줌.(가장중요)

 

 

overflow

박스 안의 내용이 박스보다 클 경우 넘치는 부분을 처리하는 속성입니다.

속성 값	설명
hidden	넘치는 컨텐츠를 숨김
auto	넘치는 컨텐츠가 존재할 경우에만 스크롤바를 생성해 줌. (반응형)
scroll	넘치는 컨텐츠가 없어도 스크롤바를 생성해 줌.
scroll-y,scroll-x	각 방향으로 따로 처리하게 해줌

 

 

float을 해제하는 몇 가지 방법

float를 해제하지 않으면 다음 박스들에 속성이 제대로 지정되지 않으며 무엇보다 float된 박스를 감싸는 박스에 부여된 배경, 테두리 여백 등이 하나도 나오지 않습니다. 따라서 레이아웃을 제대로 표현하는데 float해제는 반드시 필요합니다.

 

방법	풀이
1	flaot된 박스들의 바로 다음 박스에게 clear:both; 한다. - 바로 다음에 박스가 없으면 사용할 수 없다.
2	float된 박스들을 감싸는 박스를 다시 float:left; 한다. - 그 float까지 연쇄적으로 해제해야 하며 width값 주어야 크로스 브라우징 됨.
3	float된 박스들을 감싸는 박스에 overflow:auto(hidden)한다. - 세로 스크롤바가 생길 경우 사용할수 없으며, width값 주어야 크로스 브라우징 됨.
4	float된 박스들을 감싸는 박스에 height값을 준다. - 본문 내용엔 높이를 주지 않으므로 세로 사이즈가 불변일 경우 아니면 사용불능.
5	float된 박스들을 감싸는 박스에 가상요소 :after를 주어 해제한다. - 아무 부작용 없으며 width값 주어야 크로스 브라우징 됨.  1번이 안되면 이 방법이 가장 좋음.