전에 float 강의를 듣긴 했으나 잘 이해가 되지 않았어서 다시 공부한다.
block이 길막하는 성질이 있는것에 반해, float는 그렇지 않아 가로배치를 할때 자주 사용한다고 한다.
float를 사용하면 어떤 일들이 일어날까? 어떤 식으로 레이아웃을 망가뜨리는가?ㅎ
그리고 어떻게 이를 고칠수 있을까? 공부해보았다
요소 하나에 float속성을 주면 display가 inline에서 block으로 바뀐다.
따라서 block과 관련한 width padding margin 등의 속성을 사용할 수 있게 된다.
but, 이 경우 block의 종특인 길막이 불가하다!
여기서 말하는 길막이란 따로 width를 선언하지 않을 경우 width가 부모의 content-box의 100퍼를 차지하게 되는 것인데, 이러한 특징이 반영되지 않는다는 것이다.
대신 차지하는 컨텐츠 만큼의 공간을 갖게된다.
그리고 block이 갖는 종특이, 따로 width를 선언한 경우 남은 공간은 margin으로 채워진다는 것인데 (부모의 content box만큼) 이러한 성질 또한 이 경우에서는 일어나지 않는다.
만약 부모 content box내의 모든 자식요소가 float 속성을 갖게되면 어떻게 될까?
사실상 content box의 영역이 사라지게 되는 것이며, 레이아웃 붕괴를 초래한다!
다른 요소들이 이 float된 요소들의 영향을 받아 피해가게 되는 형국이 발생한다.
그래서 요새는 float를 잘 안쓰는 추세이긴 하다고 한다.
How to fix:
1. 부모요소에 overflow:hidden;속성을 줘버리는것. (더 쉬운 방법이긴 하나 어떤 원리인지 이해하기 힘들다)이렇게 하면 부모요소가 float자식들을 인지하게 된다
- clear:left/right/both(float left와 right 둘다 영향을 안받겠다!) 사용.
예시:
부모요소인 parent에 .parent::after를 적용해서 content:"";, display:block; clear:left(또는 다른거);하면 레이아웃이 잘 자리잡게됨.
(html에서 의미없는 div를 만드는 대신,
css에서 가상 요소를 만드는 것인데, 이때 이::을 붙인게 가상 요소를 뜻한다.)
이때 content 빼먹으면 안만들어지니 주의!
