float의 기본지식
- float는 옆 공간이 없기 위해 사용
- 자식에게 쓰여지면 공중으로 뜨기 때문에 공간이 사라져 버림,그러므로 부모요소에 내용 없는 블락 요소를 만들어서 클리어 속성을 넣는것
- class cf (clearfile) 를 플롯요소 쓰는 자식요소의 부모요소에 클래스 명을 지정시키고 적용되게 클리어파일을 활용한다. ex).cf::after {content:'';display:block;clear:both}
- 막내를 밑에 온전한 상태를 두고 싶을때 막내에게 clear:both를 사용해 부모요소에 영향을 준다.
- 자식들이 float정렬을 하면 부모요소의 높이가 무너짐(자식요소가 뜨기 때문에)
- 큰그릇은 float가 좋고 작은 그릇들은 상황에 따라 float와 inline-block을 혼용해야할 필요가 있다.
- li가 감싸고 있으면 display:block li가 감싸고 있지 않으면 display:inline-block;
- float 정렬한 요소들의 동생이 있었다면 동생이 딸려 올라감
(해결책)
- float정렬 바로 밑 자식이 존재하면 그 자식요소 에게 clear-both추가함 (쉽게말해 내리갈굼 손절 방법이다.)
- float정렬 바로 밑 자식이 없으면 부모 태그에 클래스 cf를 추가함
- 위 자식요소로는 통용되지 않는다 ```