[CSS] 정렬방법

정렬 방법

1. float : 기본적으로 띄워지게 만드는 속성임. 블록요소를 가로로 나란히 정렬하기 위해 사용.

  일단 이걸쓰면  더는 width가 100%가 아니다. 단점은 부모태그가 float 속성의 자식 태그를 

  인식하지 못함. 해결하려면 overflow: auto나  overflow: hidden 를 줘야함. 

• 블록 요소를 가로로 나란히 정렬하기 위해서는 float을 이용
• float된 요소는 기본적으로 상위 요소가 영역을 파악하지 못함 (float가 요소를 띄움)
• float는 띄어지기 때문에, 보통 다음 블록 요소는 float된 요소 밑에 깔리게 됨.
• 블록 요소는 기본적으로 float을 인식하지 못함. 텍스트, 인라인 요소, 그리고 float된 요소만 다른 float요소를 인식 함.
• float된 요소를 부모 요소가 포함하기 위해, height로 임의의 높이 값을 줄 수 있지만, 내부 float 요소의 높이 바뀔 때마다 직접 바꿔줘야 함.
• float된 요소들 다음에 비어있는 div에 clear:both 속성을 주어 부모가 높이를 자동으로 인식하게 할 수 있음.
• float된 요소들의 부모 요소에 overflow:hidden을 줄 경우, 부모 요소는 float된 요소를 인식.
• overflow:hidden은 자식 요소의 margin 값도 내부로 인식하게 함.
• float된 요소의 부모가 float 될 경우, 부모 요소는 자식 요소를 인식 함.
• float 될 경우, 기존 블럭 요소처럼 너비가 넓게 퍼지지 않음. 기본적으로 내부 영역 만큼의 너비를 가짐.

참고자료 : http://webberstudy.com/html-css/css-2/float-layout/

2. flex : 가로 또는 세로로 정렬할 수 있음.

참고자료 : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox%EC%9D%98_%EA%B8%B0%EB%B3%B8_%EA%B0%9C%EB%85%90