[HTML/CSS] float 문제해결

만약 내가 두 컨텐츠를 분리해서 좌우로 정렬하고 싶다면?

둘다에 float: left 를 주면 된다

그러면 지금은 파란박스와 주황박스는 공중에 뜬 상태이다!

근데 그러고 나서, 밑에 무엇인가를 추가하면 파란박스와 주황박스가 공중에 붕 뜬 상태이므로 그 안으로 들어가서 안보이게 된다.

이를 해결하려면 가상의 박스를 하나 추가해서 clear: both 를 주면 해결됨!

<div style="clear: both"></div>

→ clear: both 는 모든 상태를 제자리로 돌려놓는다는 뜻이므로 그 이후로 만드는 요소들은 앞전에 float를 줬건 상관없이 원상태에서 스타일을 먹일 수 있음

물론 새로 추가한 요소에 clear:both를 줘도 되지만, 그렇게 되면 그 요소에 다른 스타일값은 제대로 먹히지 않을 수가 있다. 그래서 그 요소부터 제대로 먹히게 하고 싶다면 위에 가상의 박스를 하나 만들어 놓고 거기에 clear:both를 주는게 더 좋다.

.container {
    width: 800px;
}

.header {
    /* 부모 태그 width의 100% */
    width: 100%; 
    height: 50px;
    background-color: aqua;
}

.left-menu {
    width: 20%;
    height: 400px;
    background-color: cornflowerblue;
    float: left;
}

.right-menu {
    width: 80%;
    height: 400px;
    background-color: coral;
    float: left;
}

.footer {
    width: 100%;
    height: 100px;
    background-color: grey;
    clear: both;
}

→ 여기서는 footer에 clear:both를 줬지만, 그 위에