float속성 해제하기
in Sidemenu / UI
[float속성 다섯가지 방법으로 해제하자~]
Float 속성 해제
1. 부모요소에 height 부여
- 부모에게 자식을 감쌀 수 있는 높이 값을 부여하여 float의 영향에서 벗어난 것처럼 할 수 있는 방법
- 하지만 자식의 높이 값이 바뀔 경우 부모의 높이 값이 고정이기 때문에 결국 일시적인 눈속임과 같은 해제 방법이라고 볼 수 있다.
2. 부모의 요소의 float 속성
- 자식 요소가 좌우로 플로팅 되었을 때 부모에게 float속성(none 제외)을 준다면 그 부모 요소는 자식 요소의 높이 값을 수렴하게 된다.
- 이미 float이 되어 있는 부모 요소가 자식 요소들에게 float이 부여된다고 했을 때 따로 해제 방법을 사용할 필요가 없다.
- 이처럼 자식 요소의 float을 해제하기 위해 부모 요소에 의미 없는 float을 부여하는 방법을 사용하는 것은 좋지 않다.
3. overflow(visible제외)를 이용한 해제
- 여러 가지 해제 방법 중 가장 간단한 방법
- float이 된 요소의 부모 요소에게 visible을 제외한 overflow를 부여하면 float을 벗어날 수 있다.
- 만약 이 부모 요소 안에 부모의 영역을 벗어나는 팝업같은 자식 콘텐츠가 있다고 한다면 그 팝업이 보이지 않는 치명적인 단점을 가지고 있다.
- 그래서 이 방법을 사용할 때에는 내용 중에 부모의 내용을 넘쳐나서 노출되는 콘텐츠가 없는지 확인이 될 때 사용해야 한다.
4. 인접 형제요소의 clear속성을 이용한 해제
- 인접 형제 요소에게 clear속성을 적용하여 float흐름을 끊을 수 있다.(left, right, both, none)
- clear속성을 사용하기 위해서는 요소가 블록 레벨 요소여야 한다.(span같은 경우에는 display:block 속성 추가하여 사용)
- 가장 깔끔한 해제 방법이지만 아무런 의미가 없는 빈 태그를 이용해야 하기 때문에 시맨틱적인 요소에선 불필요한 요소가 생기는 것이기 때문에 조금 번잡하다는 단점이 있다.
5. 가상요소를 이용한 clear속성을 이용한 해제
- clear해제가 불필요한 태그를 이용한다는 단점을 보완할 수 있는 해제 방법
- 부모 요소에 :after를 이용하여 자식 요소들 중에서 가장 마지막에 위치시켜 블록 요소로 만들어주고, clear해제를 한다.
- 가상 요소는 content 요소가 필수이기 때문에 “ “ 처럼 빈 내용을 주어 빈 태그를 넣어준 것과 같은 효과를 만들어 준다.
- 팝업처럼 콘텐츠를 벗어나는 경우나 콘텐츠의 높이 값이나 사이즈의 변화에도 유연한 대응이 가능하여 해제 방법으로는 보편적으로 가장 많이 사용하고 있는 방법 중 하나이다.
.box_parent:after {
display: block;
clear: both;
content: '';
}
