layout: post title: “[HTML&CSS] Box & Box model” subtitle: “박스에 대한 개념을 잡아보자” date: 2017-10-01 10:02:00 author: “Hoon” header-img: “img/post-bg-nextgen-web-pwa.jpg” catalog: true tags: - HTML&CSS — float가 작동하는 방식(원리) float되면 넌 집 나간 자식이야
float시키게 되면 부모의 px또한 줄어들게된다.
float시키면 block으로 바뀌게 된다.
–>width도 되고 height도 된다는 의미
–>하지만 길막하는 능력이 없어져~
부모의 width만큼 넓어지지 않는다..!!! margin또한 생기지 않는다!!!
이때문에 옆에 빈공간이 생기고 가로배치가 가능해지는 것이다~~@!!
인라인요소가 부릅니다,
인라인 요소는 float된 요소가 보여요 그러니까 float된 요소들은 피해서 배치돼요
위의 파사삭들을 해결해보자~!!
overflow:hidden
자신이 가지고있는 자식들을 찾고 블록배치를 완료시킨다.
float해제의 정석, clearfix
–>겹쳐진 녀석에게clear속성을 left~~~등등으로 설정하면 float에 영향을 받지 않는다. (block일 때만 사용가능 –> .parent::before, .parent::after로 가상자식을 만들어줘 잘모르겠는데 해결이된?다?? parent::after{ content:’’; clear:both;
