1. Float 속성
float은 한국어로 뜨다...!
float은 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가...를 해결하기 위해 만들어졌으나, 요즘에는 레이아웃용으로 많이 사용되고 있다.
inherit: 부모 요소에서 상속left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다.none: 요소를 부유시키지 않음
left와 right를 통해 부유속성을 지정시 display는 무시된다. (none은 제외)
또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라진다.
1) float: left
2) float: right
3) float: none
4) 레이아웃 짜기
2. Clear 속성
float 속성을 통해 태그를 부유시킨 이후 문서의 흐름을 제거하기 위해 쓰인다. 방향에 따라 3가지 속성을 사용할 수 있다.
left: 좌측 부유 제거right: 우측 부유 제거both: 양쪽 모두 제거
1) Clear 활용하기
2) 레이아웃에서 활용하기
- 레이아웃에서 많이 사용되는 float인만큼, clear속성도 레이아웃에서 많이 사용되는데, 그 이유는 아래와 같다.
- float을 적용한 태그는 붕 뜨면서 상위 요소의 높이를 아래와 같이 없애게 된다.
- 때문에 clear 속성을 적용하면 이러한 문제를 해결할 수 있다.
3. float과 display: line-block의 차이점
1) inline-block은 요소 사이에 공간이 생긴다.
2) float을 하는 경우 부모요소의 높이가 사라진다.
