CSS float

juya_·2020년 10월 19일
0
post-thumbnail

💊 CSS float

특정 요소를 기존 문서 흐름에서 벗어나 '붕~뜨게' 만든다.

'붕~뜬다', '부유하다'라는 의미는 부모 요소 박스에서 float가 된 자식 요소가 부모 박스가 인식하지 못하는 요소가 되어 '집나간 자식'이 된다. 주변 형제 요소도 해당 float된 요소를 인식하지 못한다.

float 된 요소는 display: block 이 된다.

단, 'block' 으로 보여지지만 실제로는 display : inline-block 이 된다.

💊 float 속성값

left : 요소를 '왼쪽'으로 띄운다
right : 요소를 '오른쪽'으로 띄운다
none : 기본값, float를 설정하지 않는다.

💣 float 해제 기법

float된 요소는 말 그대로 '붕~뜬' 상태이기 때문에 레이아웃을 엉망진창 무너트리게 된다. 부모가 찾지 못하는 float된 자식요소를 부모가 찾을 수 있게 하기 위해서 float를 해제해야 한다.

'float를 해제한다'라는 것은 '붕 뜬' 상태를 원래대로 돌리는 것이 아닌, float 특성을 부모가 무시할 수 있도록 해주는 것이다. (부모가 해당 요소를 인식할 수 있도록 하는 것)

🛠 clearfix

어렵지만, 규칙에 맞는 float 해제 방법이다.
부모가 해당 요소를 제대로 인식하기 위해서 float 요소 바로 뒤에 오는 형제 요소를 만들어서 해당 요소에 clear 속성을 지정한다.

형제 요소를 만들 때는 가상요소를 만들면 편리하다.
가상 요소 만드는 방법은 아래 예시를 참고해보자.

 .card::after {
    content: "";
    display: block;
    clear: left;
  }
  • ::after 해당 클래스의 마지막 자식 요소를 만든다.
  • 가상 요소를 만들 때는 'content' 속성은 필수
  • clear 속성 사용시 해당 요소의 display는 block 이어야만 한다.

🛠 overflow: hidden

넘치는 것을 숨겨주는 속성
부모 요소 박스가 자식 요소 박스의 넘치는 것을 숨겨준다.
부모 요소에 사용해야 한다.

부모 요소 float된 자식 요소를 인식하지 못하는 상태에서 해당 속성을 사용 시 부모 요소 박스가 자식 요소 박스의 넘치는 높이를 자동을 인식하며, 자식 요소를 인식하게 되는 방법으로 현재는 이해한 상태다.

float를 가장 간단히 해제할 수 있는 방법이지만 권장하지는 않는다.

만일 숨기지 않고 자식 요소 박스의 넘치는 것을 보여줘야 할 경우에는 해당 속성을 사용 시 원하는 상황을 만들 수 없기 때문에 상황에 맞춰서 사용해야 한다.

참고

김버그의 css는 재밌다.

profile
콘텐츠 마케터에서 프론트엔드 개발자로...

0개의 댓글