float은 **'띄우다'**라는 뜻을 가지고 있으며 float 정렬은 다양한 객체를 띄워서 정렬을 하는 속성을 가집니다.
cnf
원래 float 속성은 아래 사진처럼 그림을 따라 흐르는 텍스트 레이아웃을 웹에서 구현하기 위해 탄생한 속성입니다.
<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;
}
하지만 왼쪽 혹은 오른쪽으로 정렬이 되는 특성 덕분에 현재는 <div>, <p>, <table>과 같은 블록 속성을 가진 객체를 정렬하는 가장 기본적인 방법으로 사용되고 있습니다. float 정렬은 크게 두 가지 속성이 있습니다. 좌측 정렬, 우측 정렬이 있으며 중앙 정렬은 없습니다. 하지만 불가능한 것은 아닙니다. margin 속성을 이용해서 할 수 있으며 좌측, 우측 정렬을 설명한 후에 예제를 통해 보여드리겠습니다.
float 정렬의 예시를 보여드리기 이전에 블록 속성 태그의 성질과 float 속성의 성질에 대해 설명드리겠습니다.
블록 속성 태그는 아래와 같이 가로폭 전체의 넓이를 가지는 속성을 가지고 있습니다.
Web Animation 1부 css Animation