[css] float

float

float란

• 단어의 뜻 처럼 콘텐츠가 그 주위를 흐르도록 하게하는 css 속성
• 웹 레이아웃으로 많이 쓰이지만 레이아웃을 목적으로 설치된 것이 아니다.
  • 초기 웹페이지의 경우 이미지 주위에 텍스트를 감싸기 위해 사용되는 용도로 주로 쓰였기 때문이다.
• 최근에는 flex, grid로 인해 잘 사용되지 않는 추세이다.

기본속성

값: left, right, none

기본값: none

이미지에 float: left속성을 주었을 경우 왼쪽으로 이동이 되며 텍스트 들이 이미지 주변으로 흐른다(float)

float 특징

1. float된 요소는 일반적은 플로우를 벗어나지만 레이아웃에는 영향을 끼친다.
2. 마진 병합이 되지 않는다.
3. float요소는 기본적으로 width가 0이기 때문에 사용할 경우 지정해주자.

세부사항

1. float 속성의 경우 flex box를 벗어나지 않는다.
2. 덮어쓰는 현상을 방지한다. 덮어쓰지 않기 때문에 float된 요소가 먼저 있을 경우 옆으로 쌓이게 된다.
3. 단, 마이너스 마진을 통해 겹치게 할 수는 있다. 겹칠 경우 인라인 요소는 float된 요소의 위에 뜨고 블록요소는 float 아래에 나타나게 된다.

인라인 박스와 블록박스

1. 인라인 박스:
   • 인라인 박스는 요소의 내용만큼의 너비를 가지며, 새로운 인라인 요소는 현재 줄에서 계속됩니다.
   • 예시로는 <span>, <a>, <strong>, <em> 등이 있습니다.
2. 블록 박스:
   • 블록 박스는 기본적으로 수직으로 쌓이며, 부모 요소의 가로폭 전체를 차지합니다. 새로운 블록 요소는 항상 새로운 줄에서 시작합니다.
   • 예시로는 <div>, <p>, <h1>, <ul>, <li> 등이 있습니다.

clear

플로팅된 요소 주위로 흐르는걸 원치 않을 때 사용한다.

기본속성

값: none | left | right | both

기본 값: none

left, right, both를 쓸 경우 float 요소로 설정한 값을 무시하게 되며 float 다음 블록에서 부터 콘텐츠가 표시 된다.