Float

float

요소를 좌우 방향으로 띄움(수평 정렬)

property

• none : 기본값
• left : 왼쪽으로 띄움
• right : 오른쪽으로 띄움

수평 정렬

각 요소에 float 속성이 적용되면 차례로 정렬 된다

float 해제

float 속성이 적용된 요소의 주위로 다른 요소들이 흐르게 되는데 이를 방지하기 위해 속성을 해제 함

• 형제요소에 clear: (left,right,both)를 추가하여 해제
• 부모요소에 overflow: (hidden,auto)를 추가하여 해제
• 부모요소에 clearfix클래스 추가하여 해제 (중요!)
  ex)
  .clearfix::after {
  content: "";
  clear: both;
  display: block;
  }
  .child {
  float: left;
  }

부모 요소의 가상선택자 after를 사용해 float을 해제

clear

float속성이 적용되지 않도록 지정(해제)

• none : 기본값
• left : 왼쪽 띄움 해제
• right : 오른쪽 띄움 해제
• both : 양쪽 띄움 해제

display 수정

float 속성이 추가된 요소는 display속성의 값이 대부분 block으로 수정됨
flex, inline-flex 제외