float 너란 녀석... (3) (feat. float을 이용해서 layout을 붕괴해보자!)

이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다.

출처 edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

김버그의 HTML&CSS는 재밌다 - 구름EDU

 

 

 

 

 

 

 

 

 

 

 

 

 

📝 메모

---

 

 

 

👩‍💻기본 코드

    <div class="parent">
      <div class="child black">Child</div>
      <div class="child yellow">Child</div>
      <div class="child blue">Child</div>
    </div>

 

.parent {
  width: 400px;
  margin: 0 auto;
  background-color: #eff2f7;
}

.child {
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: #fff;
  font-weight: 600;
  margin: 0 auto;
}

.black {
  background-color: #black;
}

.yellow {
  background-color: #ffc82c;
}

.blue {
  background-color: #0066ff;
}

 

앞의 예시들과 달리

이번에는 parent의 width가 400px이고

첫 child를 red에서 black으로 바꿨다.

 

 

 

 

 

 

 

 

💻결과

 

 

 

 

 

 

 

 

 

👩‍💻 black에 float:left를 주면

 

 

black은 자기가 갈 수 있는 가장 왼쪽 끝에 달라붙고 

black의 빈 자리에 나머지 자식들이 쭉쭉 올라와서 채운 것을 볼 수 있다.

(yellow도 blue처럼 중앙에 위치해있고 양 옆으로 margin이 있다. 다만 black에 절반이 가려져있을 뿐)

 

 

그리고 캡쳐한 이미지로는 티가 안나지만

parent element의 height가 600px에서 400px로 줄었다.

 

 

 

 

 

 

 

 

 

 

 

 

 

👩‍💻 이번에는 black에 float:left를 주고 yellow에도 float:left를 주자.

 

 

yellow도 붕 떠서 자기가 갈 수 있는한 왼쪽으로 가고 싶어 하는데..

이미 붕 떠있던 black 때문에 어쩔 수 없이 black 옆에 붙었다.

 

 

 

 

이때 blue는 

 

black과 yellow에 가려져서 그렇지

여전히 중간에 잘 위치해있다.

 

 

 

 

parent element의 height은 당연히 200px이 되었다.

 

 

 

 

 

 

 

 

 

 

 

👩‍💻 이제 black, yellow, blue 모두에 float:left를 주면

parent element의 너비가 400이기 때문에 blue가 yellow 옆으로 가지 못하고

왼쪽 아래에 온다.

 

 

 

 

 

 

 

 

 

 

🔥 이때 생기는 문제..

 

 

parent element의 height가 0이 되어버렸다.................

그냥 사라진 거나 다름 없쥬...........

 

이 layout 도대체 어쩔..............