[CSS] float

float 속성

---

• float는 웹페이지에서 요소를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성이다.

h4  { float: left;  margin: 0; }

• left : 요소가 자신을 포함하는 블록의 왼쪽에 떠다니게 한다.
• right : 요소가 자신을 포함하는 블록의 오른쪽에 떠다니게 한다.
• none : 요소를 떠다니게 하지 않는다.
• inline-start : 요소가 자신을 포함하는 블록의 시작에 떠다니게 한다.
• inline-end : 요소가 자신을 포함하는 블록의 끝에 떠다니게 한다.
• inherit : 부모 요소에서 상속받는다.

clear 속성

---

• clear를 사용하여 float 속성의 영향을 받지 않도록 할 수 있다. → float 속성을 적용하고자 하는 요소가 모두 등장한 이후에 사용한다.

.clearfix { clear: both; }

• left : 왼쪽에 floating 된 요소를 지정 해제한다.
• right : 오른쪽에 floating 된 요소를 지정 해제한다.
• both : 양쪽 모두 floating 된 요소를 지정 해제한다.
• none : floating을 해제하지 않는다.
• inherit : 부모 요소에서 상속받는다.

overflow 속성

---

• overflow 속성은 콘텐츠가 박스를 벗어날 때 어떻게 처리할지 결정한다.

p.withRedBoxes { overflow: hidden; height: auto; }

• visible(기본값) : 벗어난 콘텐츠가 그대로 보여진다.
• scroll : 우측에 스크롤 바를 통해 콘텐츠를 확인할 수 있도록 한다.
• hidden : 벗어난 콘텐츠를 모두 숨긴다.
• auto : 콘텐츠가 박스를 벗어날 때만 스크롤 바를 노출한다.
• inherit : 부모 요소에서 상속받는다.

P.S.

간단하게 콘텐츠를 끼워 넣을 수 있는 기능 정도로만 알았는데, 이렇게 찾아보니 참 다양한 기능과 활용성이 있었다😄

참고 문서

---

• float 속성 by ofcourse
• float by MDN Web Docs
• overflow, float, clear by webberstudy
• CSS Float and Clear by Tech Altum Tutorial