[css] float 정렬

css로 정렬시키는 방법이 여러 가지 있는데,

오늘은 float에 대해서 정리해볼게요.

float만의 특징이 있기 때문에, 조심해서 사용해야 합니다.

 

단어의 뜻 그대로 '뜨다'라는 성질이 있기 때문에 태그들이 나란히 있다가 

그중 하나가 float 속성이 들어가면, 그 사이에서 붕 뜨게 됩니다. display:block 속성을 무시하는 거죠

float는 left 정렬과 right 정렬이 있는데 (inherit, none 제외)

float이 설정된 요소는 브라우저가 높이를 인지를 못하는 큰 문제점이 있습니다. 

 

이때 float 끊기라는 것을 해주면 되는데, 여러 가지 방법이 있습니다.

• float의 부모에게 강제적으로 높잇값 주기 -> 반응형일때 자동 높이값 설정 불가능
• float의 부모에게 overflow:hidden주기 -> 해당 요소 안의 콘텐츠가 잘리거나 스크롤이 생기기 때문에 잘 쓰지 않음
• float의 부모에게 또 float주기 -> 가운데 정렬이 불가능
• float의 부모에게 가상 요소를 붙여 clear:both 하기 <추천>

여기서 clear:both 란 양쪽의 float를 다 끊는다는 의미입니다.

 

*작성법

부모태그:after {display:block;content:'';clear:both;}