float 속성 / clear:both / clear를 class로 만들어 사용하기(부모요소 넓이값 확보, float 해제)
clear 속성은 float 속성을 해제 할 때 사용한다.
요소들을 inline처럼 가로로 배치할 때
float라는 속성대신에 flex가 더 자주 사용되지만,
float를 사용할 때는 부모의 높이 값 확보를 위해서
clear속성을 사용해준다.
예시를 통해 알아보도록 하자
html구조는 간단하게 div4개를 만들었고
각각의 박스에 색상을 주었다.
div는 기본적으로 block요소이기 때문에 세로로 배치가 되는데,
이때 float를 사용하면 한줄로 배치된다.
각 요소들을 왼쪽이나 오른쪽 한 쪽으로 나란히 배열하고 싶다면,
각 요소에 'float:방향' 을 주어도 되고 그 요소들을 한꺼번에 묶어 float를 적용해도된다.
두 방법 모두 결과는 똑같게 나온다.
그런데 여기서 이렇게 float속성을 적용했더니
부모인 container의 높이값이 확 줄어든 것이 보인다.
float라는 속성은 말그대로 물위에 뜨는 것과같은
부유하는 속성이기 때문에 3차원 공간에 둥둥 떠있는 구조로 생각하면된다.
그렇기 때문에 요소들이 들어있지 않은 부모는 높이 값이 사라지는것!
여기서 border가 없고 html구조가 단순하다면 아무런 영향이 없지만
하나의 요소가 뒤에 더 따라온다면?
container안에 요소가 없다고 생각하고 다음 요소가 아래로 딸려 들어가는 것을 볼수 있다.
이렇게 되면 부모에 margin이나 padding 값을 주어서 높이를 만들어도되지만,
정확하게 float에 맞대응 하는 방식으로 해제시켜서 처리하는 것이 좋다.
오늘 소개할 방법은 2개이다.
1. float적용후 float를 해제할 요소에 clear:both 속성 적용
2. clear 관련 가상클래스를 만든후 부모요소에 적용
1. float적용후 float를 해제할 요소에 clear:both 속성 적용
* clear 속성
clear:none : 기본 값, clear를 설정하지 않은 것과 동일
clear:left : 왼쪽으로 붙는 float 정렬 취소
clear:right : 오른쪽으로 붙는 float 정렬 취소
clear:both :양측의 float 정렬을 모두 취소
box는 총 4개였으나 위에 2개만 float를 적용하면
박스3번이 사라진것을 볼수있다. 사실 사라진것은 아니고
첫번째 box01(red박스)밑으로 깔려 들어간것이다.
이때 글씨는 같이 깔리지 않는다.
(글씨나, 이미지는 빼고 div부분만 밑으로 깔린다. 차후에 다시 설명)
float속성을 해제하고자하는 다음요소에
clear : both 적용하면 부모의 높이값이 확보되면서 제 자리를 찾는 모습을 볼수있다.
아니면
이상태에서
주황색 box에 clear : both를 적용해도된다.
하지만, 이 방식은 부모의 높이값이 확보된다기 보다는 다음 요소가
그냥 위에 요소들이 차지했던 원래 값을 알아서 확보하는 방식?
2. clear 관련 가상클래스를 만든후 부모요소에 적용
이 방식이 추천되는 방식이다.
가상요소 ::after을 사용하되, class를 제작해서 편리하게 쓸수있다.
* 가상요소 ::after 사용
class명::after{
content:'';
display:block;
clear:both;
}
이렇게 클래스를 만들어주고, float된 자식들을 담고있는 부모요소에 적용해주면
부모의 높이값이 확보된 모습을 볼수있다.
즉, 자식에 각각 float속성을 사용해야 하는 레이아웃이라면
1번 방식을 택하는 것이 편리하고, 자식 전체가 float되는 경우라면
2번을 사용하면 빠르게 해제처리가 가능하다.
어떻게든 적합한 방식으로 사용하면 되는것 !