CSS float

http://google.com/url?q=https://codesandbox.io/s/cssfloat-1nrde?file%3D/index.html&sa=D&source=apps-viewer-frontend&ust=1738340247514938&usg=AOvVaw24dO9Arfv7ghhYTWgjORVZ&hl=ko

텍스트와 함께 이미지 배치를 위해 고안되었지만 수평 정렬을 위해 사용됨

flexbox, grid도 수평 정렬 지원

flexbox 이제 호환성 ㄱㅊ아서 float 잘 안씀

clear 프로퍼티와 같이 쓰인다.

왼 큰이미지 오른쪽 작은글 2개인데 아래쪽 글은 이미지 밑에 배치하고 싶은 경우 → clear: left

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <img
      style="float: left; width: 150px; height: 50px; margin: 10px;"
      src="<https://www.fun-coding.org/style/images/funcoding.png>"
      alt="funcoding"
    />
    <div>
      잔재미코딩이라는 이름은 한번 들으면, 잊혀지지가 않습니다.
    </div>
    <div style="clear: left;">
      재미있는 이름이죠. 프로그래밍은 할 때마다 힘이 듭니다. 하지만 해냈을 때의
      기쁨은 정말 큽니다.
    </div>
  </body>
</html>

부유 속성이라 다음 요소가 나타날 때 height가 없는 것처럼 느껴짐

그래서 clearfix를 같이 써줘야함