1. float 의미

float은 **'띄우다'**라는 뜻을 가지고 있으며 float 속성은 요소를 띄워서 좌 혹은 우로 정렬을 하는 속성을 가집니다.

스크린샷 2022-04-12 오전 1.01.31.png

둥둥~~~

2. 기본 개념

원래 float 속성은 아래 사진처럼 그림을 따라 흐르는 텍스트 레이아웃을 웹에서 구현하기 위해 탄생한 속성입니다.

스크린샷 2021-11-02 오후 5.32.45.png

<img src="<https://t1.daumcdn.net/cfile/tistory/235B2F485958F12129>" alt="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, ad, autem quaerat sed impedit cupiditate tenetur recusandae facere, alias ab nihil nisi eligendi eaque ea molestiae dolore accusantium repellat maiores?

img {
  width:200px;
  float:left;
}

하지만 왼쪽 혹은 오른쪽으로 정렬이 되는 특성 덕분에 현재는 아래 코드와 같이 블록 박스 요소를 정렬하는 가장 기본적인 방법으로 사용되고 있습니다.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float</title>
    <style>
        figure {
            float: left;
            margin: 0 10px;
            background-color: royalblue;
        }
    </style>
</head>

<body>
    <figure>
        <img src="<https://via.placeholder.com/100>" alt="">
        <figcaption>
            Lorem ipsum
        </figcaption>
    </figure>
    <figure>
        <img src="<https://via.placeholder.com/100>" alt="">
        <figcaption>
            Lorem ipsum
        </figcaption>
    </figure>
    <figure>
        <img src="<https://via.placeholder.com/100>" alt="">
        <figcaption>
            Lorem ipsum
        </figcaption>
    </figure>
</body>
</html>