float:
이미지 주변에 텍스트를 감싸기 위해 사용되는 프로퍼티.
정확하게는, 텍스트 박스위에 이미지를 띄어놓기 위함 입니다.
css 레이아웃을 설정할때 중요한 속성입니다.
이 속성에는 left, right, none 중에 하나를 추가해야 합니다.
그런데
-float property는 부모의 크기를 인지할 수 없어서 부모의 크기를 넘어가는 경우가 발생합니다.
-block element에만 사용 가능합니다.
-clear또는 clearfix hack 프러퍼티를 사용해서 문제를 해결해야 합니다.
예) clear: both; , overflow; auto;
블록 안에서 특정 요소가 있을때 %는 상대적으로 사용하기 좋습니다.
부모크기의 기준으로 50%의 이미지 크기로 컨테이너 너비를 50%만 차지합니다.
img {
float: right;
width: 50%;
}
레이아웃을 만들때에도 퍼센트를 사용이 가능합니다. (더 공부필요한 부분)
