2021. 9. 3. 19:28ㆍ카테고리 없음
8-8-3. CSS 속성 : 레이아웃-플로트(float)
가. float 속성
- float : 물위나 공중에서 뜨다
- 요소를 보통의 흐름에서 벗어나게 할지 지정하는 속성
- 모든 요소는 기본적으로 좌측에서 우측으로, 위에서 아래의 흐름대로 화면상 배치됨
- 그러나, float 속성을 사용한 요소는 위 순서에서 벗어나 독자적인 공간 위에 배치됨
- 즉, 일반적 요소는 2차원 평면위에 배치되는 반면, float 속성을 사용한 요소는 3차원 공간에 배치됨
- 예를 들어 말하자면, 일반 요소가 땅위에 있는 비행기라면, float 속성의 요소는 하늘에서 날으는 비행기
- 그래서, float 속성의 요소는 일반 요소보다 위에 있기에, 일반 요소는 float 속성 요소 뒤로 가려짐
- 만일, 선언된 float 속성 요소가 다수라면, 그 위에서 좌측에서 우측으로, 위에서 아래 순으로 배치됨
- 이에, float 속성은 float 속성이 선언되지 않은 다른 주변 요소에 영향을 줌
- 기본값 : none
나. float 속성값의 종류
| 속성값 | 내용 |
| none | ㆍfloat(뛰움) 시키지 않음(기본값) |
| left | ㆍ좌측에서 float(뛰움) 시킴 ㆍ아래는 Box1이 float: left; 선언되어, float 되지 않은 Box2 보다 좌측 위에 있는 화면  ㆍ만일, box1 요소와 box2 요소 둘다 각각 float: left; 를 선언하면, 둘다 좌측을 기준으로 위로 떠서 좌에서 우로 순서대로 화면에 표현됨  |
| right | ㆍ우측에서 float(뛰움) 시킴 ㆍ아래는 Box2가 float: right; 선언되어, 우측 위에 있는 화면  |
다. float 속성의 특징
1) 요소를 보통의 흐름에서 벗어나 띄어지게 함
2) 주변 "텍스트"나 "인라인 요소"가 float 요소 주위를 감싸게 됨
- 아래와 같이, Box1과 Box2는 float 속성으로 선언하고, 블럭요소인 <p>태그에 텍스트 내용을 선언하면,
<p>태그는 블록요소이기에 그 영역범위는 float 된 Box1과 Box2 아래로 그대로 위치하지만, 그 텍스트
는 인라인 성격이기 때문에, float 된 Box1과 Box2의 공간을 피해 빈공간에 텍스트가 위치하게 됨
3) float 속성 선언된 요소의 "display 속성값을 block"으로 변경함
- 인라인레벨인 <span> 요소의 display 속성 기본값은 inline 이나, <span> 요소에 별도로 float 속성을
선언해주면, <span> 요소의 display 속성값은 block 값으로 변경됨
- 단, 요소의 display 속성값이 inline-table / flex 인 경우는, float 속성을 선언해줘도 그 요소의 display
속성값이 변경되지 않음