[CSS] float

 

div를 넣으면 아래로 내려가는 것 이러한 현상을 normal flow라고 함

normal flow에서는 div를 옆에 둘 수 없다

 

해결방안 > float하고 position만 할 생각이다. (과거)

 

현대식 방안 > flex, grid

 

flex랑 grid는 필요할 때만 써라?
옛날 방식을 이해하고 요즘 방식을 써야 유지보수 하는 것에 잘 할 수 있다. 아직은 float를 쓰는 옛 사이트들이 있기 때문이다. 이것을 안 쓰면 아예 못쓰게 됨

#플로트를 교정하는 방법 (bfc 재계산)

 

float의 문제 자식이 집 나갔는데, 그 값을 부모가 모르니까 그것에 대한 재조정해서 그 자리를 갱신해줘야한다는 것?

1. overlfow : hidden 
2. float:left
3. inline-block
4. text-align
5. dispaly:table-cell;
6. position : absolute;
7. clearfix : both

 

*논외 : flex (bsc가 일어나기는 하지만 쓰지 않는 것을 선호)

 

 

이런 매커니즘을 이해하는 것이 굉장히 중요하다 그래야 구글링 가능
그러나 clearfix로 하면 끝난다
 

실습 : clearfix : 이거 하나면 끝난다. 마법이다

 

 *과정 

 

1. float을 적용하면 이미지가 float층으로 뜸그러나 float를 설정하면 ‘익명 인라인'을 허용하지 않는다.

 

2. 그러나 float를 설정하면 ‘익명 인라인'을 허용하지 않는다.

 

*이렇게 인라인이 들어올 수 없으니 밀린다는 것이다.

 

 

 

이렇게 기어들어온다는 말 위에 float은 떠있고 인라인은 안 들어갔다

그러나 중요한 것은 block은 기어들어 갔다는 것

 

 

3. clear:left를 여기서 준다는 것은 block을 인지하겠다는 것

 

막내가 똑똑해서 엄마가 안아준 느낌이다

clear : both;를 써도 괜찮은 것은 여기안에 left, right가 모두 내포되어 잇기 때문이다.

---

 

###자식을 일부러 만드는 것은 번거롭다

 

 

*수도 코드를 쓰는 것

: css로 가상의 자식 요소를 만들어주는 것이다.

 

 

 

그런데 안 먹힌다? 왜? display가 초기값 그대로 나오기때문에 그래서 바꿔줘야한다. 렌더링을 해줘야함.
display:block으로 만들어줘야한다. 그래야 자식이 똑똑해져서 인식해줄 수 있다.

엄마한테 clearfix를 주면 엄마가 정신차리고 그 빈자리를 인식하는 것이다.

 

 

 

 

실습 

 

 

2일만 투자해서 개발자 동안 내내 써먹기 위해서 연습해놓자! 
왜 p태그가 기어들어가 있는가? 이거 이해하면 css 종결