[CSS] 가로 배치(float, overflow, clear, inline-block)

* float

none(default): float 속성 적용 안 함

left: 컨테이너의 왼쪽에 배치

right: 컨테이너의 오른쪽에 배치

margin: auto 요소를 중앙에 배치

 

코드 예시

html

css

출력

 

float: left;

자식 요소에 float 적용

 

출력

자식 요소에 float 속성이 사용되면 부모요소는 자식요소가 없다고 판단하여 높잇값(height)을 잃는다.

 

* 높잇값 찾기 overflow: hidden;

overflow: hidden;

출력

부모요소에 overflow: hidden;을 추가하였더니 높이값이 없어지지 않는 것을 알 수 있다.

 

 

float: right;

출력

float: right; 로 오른쪽 배치

 

 

span 태그(인라인 요소)

margin: auto;

출력

span 태그는 인라인요소이기 때문에 크기값을 갖지 못하기에, 인라인블록요소로 변경하여서 width와 height 적용하였다.

margin: auto; 는 블록요소에만 적용되기에 중앙배치가 되지 않는 것을 확인할 수 있다.

 

 

블록요소로 변경

출력

블록요소로 변경하였더니 margin: auto;가 적용되어 중앙 배치된 것을 확인할 수 있다.

 

* clear

left: 왼쪽으로 배치된 float 속성 상속을 해지

right: 오른쪽으로 배치된 float 속성 상속을 해지

both: 왼쪽 또는 오른쪽으로 배치된 모든 float 속성 상속을 해지

 

코드 예시

html

css

출력

clear를 사용하지 않았더니 float 속성을 모두 상속받았다.

 

 

clear: both;

clear: both; 적용

 

출력

float 속성을 상속받지 않음.!

 

* 가로 배치 방법 정리

1. float과 overflow로 배치

html

overflow: hidden; / float: left;

출력

 

2. display: inline-block으로 배치

display: inline-block;

출력

크기값을 가지며 가로 배치할 수 있는 인라인 블록을 적용하여 가로 배치.