상세 컨텐츠

본문 제목

float에 대해서

공부 요점 정리

by ssw0428 2020. 5. 7. 11:52

본문

1) float 공부하기.
- 모든 엘리먼트의 높이는 auto다. 
  형 안에 있는 자식은 밑에 있는 동생이 신경쓰지 않는다.

- 한 엘리먼트 안에 자식들이 있다.
   enter을 쓰지않으면 서로 붙어서 잘 들어간다. 하지만,
   정교한 디자인 작업을 하기 위해 그렇게 작업하면 안된다.
   ***그래서 display: block이 필요하다[inline-block X] >> 글자가 아니라서 영향을 안받는.

   float: left 올라갈수 있으면 올라간 다음에 좌측정렬!
   float: left 올라갈 수 있으면 올라간 다음에 우측정렬!
    >> 단순한 정렬은 아니다

  float이 어려운 이유!!
  > float이 썼더니 부모의 높이가 안잡힌다.
  >> block 요소는 float 요소를 무시한다!
  >>> float계의 enter -----> clear:both

  ** 부모한테 막내를 추가(::after)하고, clear:both, display:block 줘야한다. 

'공부 요점 정리' 카테고리의 다른 글

css 주석에 관하여  (0) 2020.05.12
inline-block의 여백 줄이기 방법  (0) 2020.05.07
04.27(화) 공부 핵심  (0) 2020.04.29
04.27(월) 공부 핵심  (0) 2020.04.28
Position 정리  (0) 2020.04.26

관련글 더보기