어.. 왜 html 요소들이 내 마음대로 안 배치되고 뭔가 이상한 것 같지..? ㅠㅠ
라고 느낀 당신. 혹시 float 속성을 잘못 사용하지는 않았는가?
html에서 block 요소들은 기본적으로 요소마다 한 줄씩 띄워진다.
개발자가 원하는대로 화면을 제어하고, 구성하기 위해서 css에서는 float와 flex 속성을 지원한다.
우리는 이 중 float 속성을 살펴보자.
CSS에서는 float 속성을 요소에 적용해서 block 요소들을 상하가 아닌 좌우로 배치되게 만들 수 있다.
다음과 같이 float 를 사용할 수 있다.
<div class="floatEx">
<section>
<article></article>
<article></article>
<article></article>
</section>
</div>다음은 section 부모 요소 안에 3개의 article 자식 요소를 넣는 html 코드이다.
이에 css를 다음과 같이 적용해보자.
.floatEx section {
border: 5px solid #000;
background: border-box;
background-color: lightsalmon;
}
.floatEx section article {
width: 100px;
height: 100px;
border: 1px solid #000;
background-color: lightskyblue;
}
그럼 위와 같은 결과가 나온다.
article은 block 요소이므로 자동으로 한 줄씩 띄워서 배치되는 것을 확인할 수 있다.
이 때 float 속성을 사용하면 blcok 요소를 가로로 배치할 수 있다.
.floatEx section {
border: 5px solid #000;
background: border-box;
background-color: lightsalmon;
}
.floatEx section article {
width: 100px;
height: 100px;
border: 1px solid #000;
background-color: lightskyblue;
float: left;
}위 처럼 float 속성을 CSS에 추가해주자 아래와 같은 결과가 나온다.
왜 section이 자식 요소를 안 감싸지?
라고 생각한 당신! 바로 황급히 구글링을 해본 결과
.floatEx section::after {
content: '';
display: block;
clear: both;
}위와 같은 코드를 적용해줘야 한다는 답을 얻게된다.
왜 그럴까?
float 속성을 이용해서 블록 요소를 강제로 띄워서 좌우로 배치하면, 부모 요소는 float 속성이 적용된 요소의 높잇값을 인식할 수 없다.
해결 방법
가상 선택자(가상의 요소) after를 생성(실제로는 없는 박스 하나를 만들어서 마지막에 붙인다.)하고, content는 빈 문자를 삽입한 뒤, block 속성으로 강제 변환시킨다. 그 뒤 마지막으로 clear: both를 적용하면 부모 요소에 float의 영향을 해제해서 높잇값을 제대로 인식할 수 있다.
clear: both는 float한 박스들의 바로 아래 박스에게 주변을 흐르지 않고 원래대로 배치하도록 하는 역할을한다.(float를 해제함으로써) 이 속성을 적용할 요소는 block 이어야한다.
따라서 가상 선택자 after를 block 속성으로 강제 변환시킨 것이다.
따라서 float 속성을 사용했다면, 부모는 float 속성의 값을 따로 해제해주지 않는다면 자식 요소의 높잇값를 인식할 수 없으므로 가상의 보이지않는 block을 부모의 자식 요소들의 마지막에 만들어서 float의 영향을 해제해서 부모가 자식 요소의 높잇값을 인식할 수 있게 만들어준다.
다음부터는 float를 사용했다면 잊지말고 clear: both를 통해 부모 요소가 자식 요소의 높이를 알 수 있게 만들어주자!
결론 - float 쓰지말고 flex를 사용하자.