[css] float 속성

float는 한 요소가 보통 흐름으로부터 빠져서

텍스트 및 인라인 요소가 부모요소를 기준으로 자기 컨테이너의 좌우측을 따라 배치된다.

 

HTML 태그에 float 속성을 따로 지정하는 것이 아니라면 float:none이 기본값이다.

자동적으로 왼쪽에 정렬된다고 해서 float:left가 아니다.

 

자식요소에 float 속성이 있다면 부모는 자식요소가 없다고 판단해 높이값을 잃는다.

이 때 부모에게 overflow: hidden 속성을 지정하면 자식의 높이에 자동으로 맞추어 줌

 

float 속성이 적용되면 다음 요소(형제 요소)가 float 속성을 상속받기 때문에

clear 속성을 주어서 해제시켜야 한다.

 

 

float로 카드 모양 만들어보기

See the Pen Untitled by gaeun (@gaeundev) on CodePen.

 

 

 

 

https://developer.mozilla.org/ko/docs/Web/CSS/float