logo

JEONGGON

    블로그
github
mode
목 차
down-arrow

CSS Float

2023.02.20.

post-thumbnail

Float

1. CSS Float

  • 요소를 띄워서 텍스트 및 인라인 요소가 그 주위를 감싸도록 하는 배치
  • 왼쪽 혹은 오른쪽으로 띄워 Normal flow에서 벗어남

1-1. Float 탄생 배경

  • 텍스트 열 내부에 떠다니는 이미지를 포함하면서도 해당 이미지 좌우에 텍스트를 둘러싸는 간단한 레이아웃을 구현하기 위해 도입
  • ex) 신문, 뉴스 레이아웃

float 개념
Float 개념


- Float 예시


<div class="box float-left">float left</div>
<p>...</p>
<div class="box float-right">float right</div>
<p>...</p>
.box {
    width: 10rem;
    height: 10rem;
    border: 1px solid black;
    background-color: lightcoral;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

float 예시 결과
Float 예시 결과



2. 참고

  • Float는 초기의 목적에서 확장되어 웹 페이지 전체의 레이아웃을 구성하는데 사용되었으나, FlexboxGrid의 등장으로 초기 목적으로 회귀
cssstylefloat
profile

조정곤

주니어 프론트엔드 개발자

github
linkedin
instagram
email

< 이전글

CSS Flex

다음글 >

CSS 포지션

Css 포스트 (6)

down-arrow
CSS 소개CSS Box modelCSS 포지션CSS FloatCSS FlexCSS Semantic