float
개요
float의 단어는 '뜨다'라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다.
float 속성의 값
| inher | : 부모 요소에서 상속 |
| left | : 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름. |
| right | : 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다. |
| none | : 요소를 부유시키지 않음 |
left와 right를 통해 부유속성을 지정시 display는 무시됩니다. (none은 제외) 또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라집니다.
사용법
.content > img {float: left;}float 예제
결과
레이아웃에서의 float
float 속성은 원래 이미지와 텍스트 배치 용도로 등장했지만, 요즘에는 레이아웃용으로 많이 사용하고 있습니다.
float으로 인한 영역 깨짐을 방지하는 방법
css 속성 중 float를 사용하게 되면 height 값이 사라져 영역이 깨지는 현상이 생깁니다.
방법1 : 깨지는 영역에 똑같이 Float: left를 사용
모든 박스에 float: left를 사용해야 하며 구조가 복잡해 지면 어디에 float: left를 넣어야 할지 알기가 어려워 짐으로 추천하지 않습니다.
밥법2 : 깨지는 영역에 Clear: both를 사용
위치를 잡을 수 있으나 구조가 복잡할 때는 어떤 영역이 깨졌는지 찾기가 어렵기에 추천하지 않습니다.
방법3 : Float을 사용한 상위 박스에게 Overflow: hidden을 사용
현재 가장 많이 사용하는 방법이지만 2단 메뉴 사용 시에는 사용 할 수 없어 추천하지 않습니다.
.nav { overflow: hidden; }
.nav > div{ float: left; }방법4 : 부모요소에 Display:inline-block을 사용
이를 사용하면 박스의 성질 자체가 달라지기 때문에 이전에 작성한 태그의 결과물이 달라 질 수 있어 추천 하지 않습니다.
방법5 : Clearfix를 만들어 class로 사용 (추천)
특별한 문제점이 발생되지 않아 제일 많이 사용하는 방법입니다. 아래와 같이 clearfix를 만들어 클래스로 사용하면 됩니다.
float 속성을 Clearfix 하기 위해서 가상 선택자 ::after를 사용.
float 속성을 적용한 요소들의 부모 컨테이너에 다음과 같은 ::after 스타일을 추가.
.clearfix::before,
.clearfix::after {
content: ''; display: block; clear: both;
}