float - 왼쪽 또는 오른쪽으로 배치하기 (with clear 속성)
몇 번의 미니 프로젝트를 만들어보면서 float를 사용한 적은 단 한 번도 없었다.😳
왜냐하면 float보다 더 수월하게 스타일을 적용시킬 수 있는 flex 속성이 있기 때문이다.
하지만 언젠간 마주칠 아이인 float뿌수기 시작!🔨
1️⃣ float속성을 쓰지 않았을 때
2️⃣
float속성 적용했을 때img { float: left; padding: 20px 20px 0px 0px; }
🔵 float속성을 이용해 웹 페이지 요소를 왼쪽이나 오른쪽에 배치하면
그 다음에 오는 다른 요소들에도 똑같은 속성이 전달된다.
▪️
float :none어느곳에도 배치하지 않는다. (기본값)
▪️float :left왼쪽 배치
▪️float :right오른쪽 배치
🔵 clear속성 - float속성 해제하기
▪️
float속성이 더 이상 유용하지 않다고 알려 주는 속성이clear속성이다.▪️ 예) float : left를 이용해 왼쪽으로 배치했다면 clear : left로 종료하고,
float : right를 이용해 왼쪽으로 배치했다면 clear : right로 무효화 시킨다.▪️ float속성값이 left인지 right인지 상관없이 무조건 기본상태로 되돌리고 싶다면 clear:both로 지정
▪️ float를 사용했을 때 겹치지 않으려면 clear를 써야한다.
Ryuwisdom