CSS - float

float 속성

float 속성은 자식 엘레멘트에 주어지는데 한 부모에 들어있는 자식엘레멘트들의 일반적인 흐름속에 들어가 있지 않고 다른 흐름을 주는 속성이다.

 

기사의 사진을 넣을때 자주보는 속성이다.

 

 

단점

• 부모가 자식엘레먼트의 높이를 감지할 수 없다.

해결책

• 부모의 속성에 같은 값의 float를 적용시킨다. (부모가 겹겹이 쌓여 있을경우 계속 위로 올라가며 같은값의 float 부여)
• 부모에 overflow속성 적용 (overflow 속성은 스크롤바를 생성시킨다)
• 부모의 display속성을 inline-block으로 적용시킨다.
• 가상요소로 clear 적용

.parent::after {
  content: '';
  display: block;
  clear: both;
}

 

이렇게 부모속성에서 자식의 높이를 감지할 수 있게 된다.

 

---

 

참고



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

float - CSS: Cascading Style Sheets | MDN

developer.mozilla.org/ko/docs/Web/CSS/clear

clear - CSS: Cascading Style Sheets | MDN

github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/float-clear.md

baeharam/Must-Know-About-Frontend