flot : 배치속성
박스를 왼쪽이나 오른쪽으로 배치할 때 사용하는 속성이다.
- 박스가 여러개 있을 때 두번째 박스에 float을 적요하면 제자리에서 앞으로 떨어진다. 상자를 가로로 순차적으로 배치하고 싶으면 첫번째 박스부터 float속성이 적용되어 있어야한다.
[기본형]
-float : left; :박스를 왼쪽으로 배치한다.
-float : right; :박스를 오른쪽으로 배치한다.
-float : none; : 박스를 배치하지 않는다.
clear : float을 해제하는 속성
clear속성을 사용하면 해당 박스에 적용된 float속성을 쓰지 않은것과 같다.
[기본형]
-clear : none; : float을 해제하지 않고 유지한다. 기본값으로 clear속성을 쓰지 않은것과 같다.
-clear : left; : 왼쪽에 적용된 float을 해제한다.
-clear : right; : 오른쪽에 적용된 float을 해제한다.
-clear : both; : 양쪽에 적용된 float을 해제한다
float속성 활용
box-sizing : 컨텐츠 영역을 유지
컨텐츠 영역에 여유 공간을 주고싶을때에는 padding을 이용하고 테두리를 주고싶을때 border속성을 이용한다.
여기에 적용된 padding, border를 적용하고 싶다면 box-sizing 속성을 이용한다.
[기본형]
box-sizing: content-box;
: width, height 바깥쪽에 padding과 border가 생긴다.
즉, 총 넓이값이 변하며 기본값.
box-sizing: border-box;
: paddiing,border영역을 width,height안쪽으로 포함시킨다.
width,height의 크기가 유지.
