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를 같이 써줘야함