CSS 포지셔닝 플로팅

CSS float

float는 엘리먼트를 띄운다는의미로 왼쪽 오른쪽 두가지 지정할 수 있는 속성값을 가진다.

오른쪽위의 첫번째 그림은 아무것도 지정하지않았을때 일반 포지셔닝이다.
왼족위는 하나의 박스를 float:left로정의 한경우이다.
플로트의 경우 가로폭이 충분하지않으면 아래로 밀려난다. 오른쪽아래가 그예시
또 박스높이가 다른경우는 왼쪽아래처럼 왼족긑으로 떨어지지않고 플로트된 다른 엘리먼트에 달라붙는다.

위그림은 플로트 해제를 보여주는 예시이다.
첫번째는 역시 아무것도 지정하지않았을떄.
두번째는 박스에 float:left를 주었을떄이다. 이떄 라인박스가 오면 박스크기만큼 작아지면서 흘려지게된다.
왼쪽 아래처럼 각블럭을 해체하려면 clear를 쓰면 된다.

마지막으로 플로트를 감싸는 엘리먼트가 있을경우이다. 이때는 오른쪽 과같이  감싸는 엘리먼트가 보이지않는다.
해결방법으로는 3가지가있다.

1. 감싸는  엘리먼트에 overflow :hidden; 또는 overflow :auto;를 준다.

.class{overfolw:hidden;}

이방법은 가장쉽지만 만약 overflow를 워래목적으로  사용할경우 문제가된다

2.유사클래스사용

유사클래스와 content라는 속성을 활용하여 엘리먼트의 내용끝부분에 새내용을 추가하고 그리고 그내용이보이지않도록 높이를 0으로한다

.class:after {
    content: "."; /* content에 .을 추가*/
    display: block;
    height: 0; /*추가한 내용이 보이지않게 높이를 0*/
    clear: both;
    visibility: hidden;
}

하지만 이방법은 IE이하에서 유사클래스를 지원하지않는다.

3.홀리핵 http://www.positioniseverything.net/easyclearing.html

.class {display: inline-block;}  /* for IE/Mac */

.class {
    zoom: 1;     /* triggers hasLayout */
    display: block;     /* resets display for IE/Win */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */

다소 복잡하다.