Archive / Css / Float

컨텐츠를 배치하는 속성으로 Layout구성에도 사용하는 경우가 있음

left

좌측으로 배치

right

우측으로 배치

none

배치 없이 normal-flow

float된 컨텐츠는 clear를 사용하여 조정하게 된다.

인터넷 익스플로러에서 플로트의 마진이 두배가 되는 현상

인터넷 익스플로러에서 플로트를 사용할 때 같은 방향의 마진(margin) 값이 두배가 되는 버그가 있다.

float: left;
margin-left: 10px;

위와 같이 선언을 할때 외쪽 마진의 값은 10픽셀이 아닌 20픽셀이 된다. 이러한 현상은 이 현상은 첫번째 플로트된 요소에서만 발생을 하며 뒤에 연이어 플로트된 요소에서는 발생하지 않는다. 플로트된 요소에 display: inline 을 사용하면 이러한 현상을 해결할 수 있다.