float

float이란?

 

: 떠있다라는 의미로 말그대로 화면에서 요소를 띄우는 역할

: float 속성을 가지게 되면 inline 요소가 암묵적으로 block 요소로 바뀜

---

float 사용시 주의사항

 

position의 absolute를 사용할 수 없음

=> float 속성이 relative한 위치 지정을 하기 때문에 position: absolute; 속성이 적용되지 않음

 

float을 사용한 요소의 부모 요소는 float을 사용한 요소의 높이값을 인식하지 못함

=> 부모요소에 overflow: hidden;을 적용하여 해결할 수 있음

 

float을 사용한 다음 요소부터 float 속성이 적용된 요소와 겹치는 현상이 발행함

=> clear 속성을 사용하여 이후 요소들이 더이상 float의 영향을 받지 않게 해줌

---

float: none;

: 기본값, 요소를 띄우지 않음

 

float: left;

: 요소를 왼쪽으로 띄움

 

float: right;

: 요소를 오른쪽으로 띄움

---

참고

https://inpa.tistory.com/entry/CSS-%F0%9F%93%9A-float

https://velog.io/@codenmh0822/Float