float

코딩애플에서 display:block과 float속성에 대해 배웠다.
레퍼런스를 더 찾아보고 스스로 실험해본 내용을 정리하겠다.

display: block

• 항상 새로운 라인에서 시작한다
• 화면 크기 전체의 가로폭을 차지한다 (width: 100%. width를 지정해도 오른쪽에 요소가 들어가지 않는다)
• 이미 block 속성을 암시적으로 지닌 태그들이 있다 (div, p, li 등등)

float

• float 속성이 지정된 요소는 다음 요소 위에 떠있게 된다 (레이어가 다른 느낌. 그래도 텍스트와 이미지는 float 요소를 피해서 보인다)
• 부모 요소의 높이가 float 요소까지 확장되지 않는다. 이 경우 부모 요소에 overflow: hidden 속성을 주면 해결할 수 있다.
• float:left 속성을 주면 float 요소끼리 왼쪽 정렬이 되고, float: right는 오른쪽 정렬이 된다
• float 다음에 오는 요소가 float 요소와 겹쳐지는 것을 원하지 않는다면, 해당 요소에 clear 속성을 주면 된다
  • clear:left - float:left 속성에 영향을 받지 않게 된다
  • clear:right - float:right 속성에 영향을 받지 않게 된다
  • clear:both - float:left, float:right 두 속성에 모두 영향을 받지 않게 된다
• float 속성이 relative한 위치 지정을 하기 때문에 position: absolute 속성이 적용되지 않는다고 한다.

참고자료

• 코딩애플 - 레이아웃만들기 1: 호환성 좋은 float
• https://poiemaweb.com/css3-display
• https://developer.mozilla.org/ko/docs/Web/CSS/float
• https://inpa.tistory.com/entry/CSS-%F0%9F%93%9A-float
• https://developer.mozilla.org/ko/docs/Web/CSS/clear
• https://velog.io/@nalsae/%EB%82%B4%EB%B3%B4%EC%A0%95CSS-float-%EB%94%A5-%EB%8B%A4%EC%9D%B4%EB%B8%8C