css float

float가 적용된 요소를 기준으로, 텍스트 및 인라인 요소를 좌우측을 따라 배치되어야 함을 지정한다.

(아직 float의 개념을 완벽하게 이해하지 못했다..ㅜ 정리하면서 이해 해봐야지)

• float는 부유 요소. 떠 있는 요소로 일반적인 흐름에서 벗어남.
• 흐름에서 벗어났기 때문에 float가 적용되지 않은 다른 요소들이 순차적으로 float요소를 제외하고 정렬.
• float는 부유 요소이기 때문에 부모의 가로 값을 물려 받지 못함. 컨텐츠가 가진 값을 기본으로 받음.
  ex) li에 float를 적용하면 ul의 가로값을 물려받지 못한다. 따라서 ul은 가로값만 존재하게되고 높이값은 0이된다.

float: left; 왼쪽을 기준으로 요소 정렬
float: right; 오른쪽을 기준으로 요소 정렬(진행 방향이 오른쪽에서 왼쪽으로 흘러감)

float 속성을 해제하는 방법

1. overflow: hidden;

• 적용위치: 세로값이 0이된 "부모 요소에" 직접

  부모 자식 관계에서 부모의 높이값이 사라졌을 때 사용.
  float가 적용된 요소의 부모 요소는 높이값이 0이 된다.
  ex) li에 float를 적용하면 ul의 세로값은 0이된다.
  li의 부모요소 ul에 overflow: hidden; 을 적용하면 float가 해제된다.

2. clear: both;

• 적용위치: 흐름을 "끊을 요소에" 직접

  형제 관계에서 float의 흐름을 끊을 때 사용.
  float의 흐름을 끊고싶은 요소에 값을 준다.

3. .clearfix::after

• 적용위치: ::after를 사용하기 때문에 "흐름을 끊을 요소 부모에" 적용

  모든 요소에 clear:both를 적용하려면 번거롭기 때문에
  부모 요소에 class="clearfix" 사용하면 간편하다.

clearfix 작성법

.clearfix::after{
	 content: "";
     display:block ;
     clear: both;
}