float
left 왼쪽으로 띄운다.
right 오른쪽으로 띄운다.
float left를 하면 화면 앞쪽으로 뜨게 되어 빈공간이 되어
나머지 div들은 한칸 씩 올라오게 된다.
div1 -파랑블록
div2 -검정블록
div3 -노랑블록
▶ div1에 float: left를 했을때!
파랑블록은 화면 위로 띄워지고, 해당 자리는 채워진다.
▶ div1에 float: right를 했을때!
float 객체를 사용하면 글자나 다른 요소들은 사진 주위를 감싸게 된다.
주로 신문에서 쓰이는 형태이다.
float 해제하는 방법
▶ overflow:hidden이나 overflow:auto를 적용해준다.
넘치는 부분은 숨겨지거나 아니면 스크롤바로 적용된다는 단점이 있다.
▶ 빈 엘리먼트로 clear속성을 적용해준다.
의미없는 태그를 만들어야 한다는점이 단점이다.
▶ ::after 가상 요소를 사용해준다.
float를 적용한 요소의 부모요소에 가상의 요소를 만들어주는 것이다.
CSS3 부터는 둘을 구분하기 위해 가상 클래스는 싱글콜론(:)
가상 요소는 더블콜론(::)을 사용한다.
*가상 클래스는 :hover :link 와 같은 것들을 의미한다.
float:left → clear:left
float:right → clear:right
→ clear:both left, right 둘다 적용 가능하다.
빈 엘리먼트를 추가하지 않으면서도 적용이 가능하여 float이 clear 된다.
