Float

Float란?

float 속성은 사전적 의미론"뜨다"라는 의미를 가지고 있으며,웹 페이지에서는 컨텐츠를 가로로 나열하는데 자주 사용한다. 또한 글의 본문 안에서 이미지 혹은 레이아웃을 잡는데 자연스럽게 삽입할때 사용한다.

float:left로 인한 영역깨짐 해결방법

CSS3에서 floa:left로 레이아웃을 잡게 되었을 때, 영역 깨짐(즉, Height 값이 사라져0이 되는 현상)이 발생한다. 이 에러를 잡기 위한 방법에는 4가지가 있다.

깨지는 영역에 똑같이 Float:left를 사용

모든 박스에 float: left를 사용해야 하며 구조가 복잡해 지면 어디에 float: left를 넣어야 할지 알기가 어려워지므로 추천 X

깨지는 영역에 Clear:both를 사용

위치를 잡을 수 있으나 구조가 복잡할 때는 어떤 영역이 깨졌는지 찾기가 어렵기에 추천 X

Float을 사용한 상위 박스에게 Overflow: hidden을 사용

현재 가장 많이 사용하는 방법이지만 2단 메뉴 사용 시에는 사용 할 수 없다.

{
    nav {overflow: hidden;}
    nav > div {float: left;}
}

clearfix를 사용

이를 사용해서 특별한 문제점이 발생되지 않아 제일 많이 사용하는 방법이다 Float 속성을 Clearfix 하기 위해서 가상 선택자 ::after를 사용하면 된다. Float 속성을 적용한 요소들의 부모 컨테이너에 다음과 같은 ::after 스타일을 추가한다

{
    clearfix :: after {content: ''; display dlock; clear:both;}
}