float 너란 녀석... (1) (feat. 부모는 집나간 float을 찾을 수 없네..)

이 포스트는 김버그님의 김버그의 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 red">Child</div>
	<div class="child yellow">Child</div>
	<div class="child blue">Child</div>
</div>

 

.parent {
  width: 200px;
  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;
}

.red {
  background-color: #ff4949;
}

.yellow {
  background-color: #ffc82c;
}

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

 

 

 

 

 

#1. 집나간 자식 float 찾을 길 없네

 

첫 번째 자식인 red에 float:left를 주면

.red {
  float: left;
  background-color: #ff4949;
}

 

 

이렇게 red가 float의 뜻 그대로 붕- 뜨게 되면서 빈공간이 생긴다.

그 자리를 채우기 위해 yellow와 blue가 한 칸씩 올라간다.

 

 

 

 

 

 

 

 

 

 

그림을 보면 알 수 있듯이 yellow는 붕 떠버린 red 뒤에 가려져 있다.

 

 

 

 

 

 

이렇게 red가 붕 떠버리면 parent는 red가 어디 갔는지 찾을 수 없다.

그래서 parent의 height가

200px짜리 child 3개를 합친 600에서

red가 빠지는 바람에  400px로 줄어든다.