HTML/CSS - float

🕹 float

이미지를 텍스트로 감싸기 위해 존재한다고 한다. 사용법은 간단하다

div {
	float: left;
} 

🕹 right, left, none, initial, inherit 속성을 줄 수 있다 :)

⚡️ clear

이리저리 float를 가지고 놀다보면 float가 미쳐 날뛰는 모습을 볼 수 있다. 😱
아래 예제와 같이 float 된 요소는 인접한 다른 요소들에게도 영향을 주어 텍스트 레이아웃에 영향을 미치는것을 볼 수 있다!🤯

이때 사용하는 ⚡️동작제어 방법이 🕹clear 이다!

만약 float:right 이라면 clear:right 입력해주어야한다.

⚡️ clearfix

잘 쓰이지 않는 기술이라고 하지만 그냥 한번 살펴 보기로 했다.
만약 float된 요소가 너무 커서 날뛸경우 🕹overflow:auto 속성을 통해 제어해 줄 수 있는 방법이 바로 clearfix 이다.

⚡️ float 레이아웃 예제

float는 쓰기 불편해 보이지만 아래와 같은 레이아웃을 구현할때 쉽게 구현할 수 있는 장점이 있다. 가상의 aside 구역을 float 시켜주고, 가로길이도 지정해준다.

그 다음에 정렬할 컨탠츠의 margin 값을 float 요소의 가로길이만큼 입력해주면 짜잔🤘

🕹 px말고도 가로길이는 %로 입력도 가능하다 -> width: 25%;