CSS part 2 - (1) Float 上

Float

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it.

The element is removed from the normal flow of the page, though still remaining a part of the flow.

 

https://developer.mozilla.org/ko/docs/Web/CSS/float

float - CSS: Cascading Style Sheets | MDN

 

What happens?

 

 

 

#1. parent의 height 감소

 

float 로 어떤 요소를 붕 뜨게 한다면

그 부모 요소는 해당 요소를 집나간 자식으로 인식함.

 

 

지난 Box에서 배운 내용 中

 

부모요소의 height를 따로 설정하지 않는 이상,

부모 요소의 height = 자식 요소의 height들의 합. (margin / border / padding 포함)

따라서, 해당 요소를 float로 띄우게 되면

원래 있던 자리를 빈 공간으로 인식한다.

-> 그 이후의 자식 요소들이 빈공간을 채워나감. (앞으로 밀려감)

 

그래서 결국 끝부분에 그만큼의 빈 공간이 생기고,

부모 요소는 자식이 없다고 취급하여 그 공간만큼의 height를 줄여버림.

 

 

예제.

 

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

 

 

 

** 참고

line-height 속성

width: 200px;
height: 200px;
line-height: 200px;

 

위와 같이 width*height = 200*200으로 해주고
line-height: 200px 했더니

상-하 간격이 중앙정렬 되었다.
(+ text-align: center는 좌-우 간격 중간정렬)

 

 

여기서 .red 에 float: left를 적용해보자.

 

.red{
	float: left;
}

 

그러면 .yellow 부분이 사라지는데,

.red가 float 되면서 그 아래 빈 공간에 .yellow가 당겨졌기 때문이다.

(즉, red밑에 yellow 숨어있음)

 

자동으로, parent 전체의 height가 줄어든 모습을 알 수 있다.

 

(좌) float 하기 전 / (우) float 한 후

 

---

#2. display: block

 

 

float를 하면 해당 블록의 타입이 전부 block으로 변한다.

inline	▶▶▶▶  block
inline-block
block

 

 

---

#2-1. block 이지만 한줄 차지는 X

 

float를 하면 해당 블록의 타입이 전부 block으로 변한다.

 

그러나, block의 특징은 한 줄을 전부 차지해서

다음 요소가 그 줄에 오지 못하도록 길막을 하고.

width가 작아지면 남는 공간에는 margin을 자동으로 채우는 것이였다.

 

 

float를 통해 display: block이 된 요소는

그런 특징은 가지지 못한다.

 

 

왜?!

- float 되는순간 공중에 뜨기 때문에

그 아래 층(원래 있던 층)에서는 못함.

 

- 자동으로 생기던 margin auto가 안됨

그래도 자기 content만큼은 늘어남.

 

 

 

 

 

if.

red를 float: left 한 상태에서

yellow도 float: left 한다면?

 

red의 우측(옆쪽)에 자연스럽게 위치하게 된다.

blue는 red 밑층에 존재 (빈공간 채우기)

 

따라서, 부모 자식의 width는 원래의 2배가 되었고 (red+yellow)

height는 1/3배가 되었다!

 

 

cr: 

 

if.

blue도 float: left 해본다면?

 

- yellow의 오른쪽은 부모영역의 width때문에 못가므로

어쩔 수 없이 아래와 같이 위치함.

 

- 부모 요소의 height는 0이 됨.

(자식 요소가 하나도 없는 셈이 되므로)

 

- 얘네 셋이 위치한 곳은 부모요소가 아니라 그 위 허공이니까

 

 

float: left 는
자신이 갈 수 있는 공간 중에서 가장 왼쪽으로 가는 것임.

 

float: right는 가장 오른쪽으로.

 

 

 

height = 0이면 공간 차지를 안하는 것 -  심각한 문제 발생

 

float의 문제점.

 

💫💫💫💫💫

 

float 가 일어나면 block 요소들은 무시하지만,

inline 요소들은 float를 알아챈다.

 

따라서, float를 피해서 흘러가게 됨.

 

- 따라서 흐름이 망가지고 레이아웃이 난리가 나는 것.