css작업하다보면 간혹 곤욕스러운 경우가 많습니다.
대표적인게 float 속성인데요..
div, p 태그는 대표적인 block속성을 가지고 있는데요..
이게 float을 만나면 inlin-block으로 속성이 변경됩니다.
만약 아래 그림처럼 레이아웃을 만들려고 하는데...box2는 100%를 유지 하고 싶을때 어떻게 하실건가요?
그냥 간단하게 width:100%주면 되잖아요...하고 이렇게 말씀하실분은 직접 테스트를 해보지 않으신분이세요..
box1과 box2가 float:left 속성을 가지고 있는 상태에서 box2에 100%주면 box2는 box1 하단으로 배치되는 결과가 나타납니다.
위 그림처럼 레이아웃을 만들고 box2는 가변적인 상태, 즉 가로 크기 100%를 만들고자 한다면 스타일은 아래처럼 작성하면 됩니다.
.box1 {float:left;width:200px;}
.box2 {margin-left:200px}
box1에만 float속성을 주고 box2는 마진값만 적용해서 왼쪽에 딱 달라붙으면서도 100% 유지할 수 있게 해줍니다.