float태그(배치속성)
float은박스를 왼쪽이나 오른쪽으로 배치할 때 사용하는 태그이다. 둥둥떠다닌다는 사전적 의미를 가진것처럼, 박스를 화면에서 살짝 띄워 움직인다고 이해할 수 있다.(기본형)
float: left;
: 박스 왼쪽 배치
float: right;
: 박스 오른쪽 배치
clear태그
float을 해제하는 속성으로 보통 양쪽 float을 다 해제한다는 뜻의 clear: both를 사용한다.
-float 적용방법
태그순서가 박스 1,2,3일때
박스는 block 속성이라 여백없이 세로로 나란히 출력된다.
박스1에게 float:left를 적용하면 박스1 은 화면에서 살짝 떨어진상태로 왼쪽에 붙어있게된다.
이 때, 박스1에 보여지는 변화는 없지만, 박스1이 화면에서 떨어지면서 박스2가 그 자리로 올라가게 된다.
여기서 다시 박스2에게 float:left를 적용하면 박스2도 화면에서 떨어지기때문에 박스1의 오른편으로 가게된다.
박스3에게는 float:right를 적용한 상태인데,
부모태그의 범위에서 오른쪽으로 가게되며 따로 범위를 설정하지 않으면 브라우저의 제일 오른쪽 끝으로 정렬된다.
첫번째사진과 같은 상태에서
박스2에게 clear:both를 적용하면 위 사진처럼 이동한다.
박스2는 한 번 플롯을 적용했던 박스라서 처음처럼 박스1 뒤쪽으로 이동하지는 않지만, float: left가 해제됐기때문에 아래로 한 칸 내려온다.
박스3은 박스2의 동생이라 박스2를 따라서 한 칸 내려오고, float:right는 여전히 유지한다.
box-sizing
컨텐츠 영역을 유지하는 태그이다. 박스(컨텐츠영역)에 패딩이나 보더, 마진을 적용하게되면 컨텐츠영역을 침범할 수 없기때문에 컨텐츠 자체가 차지하는 비중이 같이 커지게 된다. 이 때 box-sizing을 사용하면, 그 넓이까지 컨텐츠영역에 포함시키게 된다.주로 box-sizing : border-box를 사용하는데, 이는 패딩과 보더의 넓이를 컨텐츠영역 안쪽으로 포함시키는 속성이다.
-> 동일한 200x200, 패딩과 마진을 20px씩 적용한 박스에 box-sizing : border-box 를 적용한 상태와, 적용 안 한 상태
