<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
float는 다음 요소 위에 떠있게 함
float 사용 시 요소 고정시키는 position의 absolute 사용금지
none - 요소를 떠있게 하지 않음(기본값)
right 오른쪽으로이동
left 왼쪽으로 이동
1. 정렬
float 사용하지 않으면 수직으로 정렬됨
float는 오른쪽부터 가로 정렬>따라서 역순
float는 좌,우 정렬만 가능
중앙 가로 정렬은 margin 프로퍼티 사용
margin: 0auto;
양 옆의 margin에 auto 주면 가로로 자동정렬됨
2. width
width 프로퍼티의 기본값은 100% 따라서 지정하지 않은 block 요소 > 부모 요소의 가로폭 가득 채움
width 프로퍼티 선언X 블럭 레벨 요소에 float 프로퍼티 선언되면 width가 inline 요소처럼 content에 맞게 최소화되고 위에 부유하게 됨
3. float 프로퍼티 관련 문제 해결 방법
3.1 float 프로퍼티가 선언된 요소와 float 프로퍼티가 선언되지 않은 요소 간 margin이 사라지는 문제
>float 선언하지 않은 요소에 overflow:hidden 선언
overflow:hidden은 자식이 부모보다 클 경우 넘치는 부분 안보이게해줌 > float 없어서 표현되지 못하는 요소 제대로 출력해줌
3.2 float 프로퍼티가 선언된 자식 요소를 포함하는 부모 요소의 높이가 정상적으로 반영X
