Float & Clear
▶CSS의 float 속성을 이용하면 웹페이지의 요소를 공중에 띄워서 화면의 좌측 또는 우측에 배치할 수 있다.
▶float은 우리말로 하면 '(물 위나 공중에서) 떠가다, 뜨다, 부유하다' 등의 뜻이 있다.
▶하나의 요소에 float 속성이 적용되면 그 다음에 오는 요소들도 계속해서 float 속성의 영향을 받게 된다.
▶float 속성이 적용된 요소 다음에 오는 요소를 float 속성의 영향을 받지 않고 새로운 줄에 배치하고자 할 때에는 clear 속성을 사용한다.
▶clear 의 속성 값 = left, right, both : 이전에 사용된 'float:left(right, both)'의 기능을 해제한다.
float으로 레이아웃을 잡는 방법
1. 가로로 배치하고자 하는 요소와
(좌우로 배치하고자 하는 요소)
같은 항렬 모두에 float:left;을 쓴다
2. 부모요소에 float을 해제한다
float은 float이라고 적용된 자식요소를 부모 요소가 높이를 인식하지 못한다.
▶해결방법 : 플롯을 해제한다
플롯 해제 방법
▶가상선택자를 잡아서 해제하는 방법
1. 부모에 높이값이 있다면 지워야한다
2. 부모요소에 :after로 가상선택자를 잡아
3. 가상선택자안에
content: '';
display: block;
clear: both; 를 적는다
4. 특이사항 : 하나라도 float을 적용한다면 float이 필요없는 나머지요소들도 모두 float을 적용시켜야 한다.