Today I Learned

cksdn0713·2021년 6월 7일
0

supanu TIL

목록 보기
6/7
post-thumbnail

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 정렬한 요소들의 동생이 있었다면 동생이 딸려 올라감

    (해결책)

    1. float정렬 바로 밑 자식이 존재하면 그 자식요소 에게 clear-both추가함 (쉽게말해 내리갈굼 손절 방법이다.)
    2. float정렬 바로 밑 자식이 없으면 부모 태그에 클래스 cf를 추가함
    3. 위 자식요소로는 통용되지 않는다 ```
profile
하자! 개발자

0개의 댓글