✏️기록하는 즐거움
반응형
article thumbnail
[CSS] 헷갈리는 float, 알고 쓰기!
HTML-CSS-JS 2023. 3. 8. 01:24

🔍 float가 무엇인가요? float는 사전적으로 뜨다, 뜨는 물건이라는 의미를 가지고 있다. CSS 속성에서의 float는 한 요소가 보통의 흐름으로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸는 자기 컨테이너의 좌 · 우측에 배치되게 한다. float는 원래 이미지 주위를 텍스트로 감싸기 위해 만들어졌지만, flexbox 레이아웃을 지원하지 않는 IE에 대응하기 위해서는 float를 사용해야만 한다. 이미지를 보며 이해해 보자! float 속성을 적용한 요소는 기존의 블록(block)이나 인라인(inline) 요소의 흐름에서 빠져나온다. 속성에 적용한 값에 따라 본인이 포함된 컨테이너의 좌, 우측에 위치하며 사전적 의미처럼 위에 혼자 컨테이너에서 빠져나와 둥둥 떠있는 느낌을 준다. 기존에는 n..

반응형