먼저 article 안에 div인 네모박스와 글자들을 적용해보자
이 네모박스 옆으로 글자들을 옮기고 싶은 경우에 float를 이용한다.
See the Pen KKWGwWa by Hyemi Lee (@hhyemi) on CodePen.
float
요소를 좌우 방향으로 띄운다. (수평정렬)
float가 적용된 태그는 display: block;으로 변하기 때문에 대부분 지정해줄 필요가 없다.
그래서 flex나 inline-flex인 경우는 효과가 없으니 주의해야 한다.
float: left : 왼쪽정렬
네모 칸에 float: left;을 추가하면 왼쪽으로 정렬된다.
See the Pen abJRzWK by Hyemi Lee (@hhyemi) on CodePen.
float: right : 오른쪽정렬
네모 칸에 float: right;을 추가하면 왼쪽으로 정렬된다.
See the Pen YzZJPQM by Hyemi Lee (@hhyemi) on CodePen.
clear : float해제
float 속성이 적용된 요소의 주위로 다른 요소들이 흐르게 되는데 이를 방지하기 위해 속성을 해제해야한다.
next-div class를 가진 div(빨간글자)는 네모박스 아래로 글자가 가고싶은 경우에 float해제하기 위해 clear를 사용한다.
See the Pen ZEeqYJX by Hyemi Lee (@hhyemi) on CodePen.
div로 추가해버리면 네모박스부분이 float: left가 적용되어서 아래로 가지 않는다.
그런경우에는 float를 해제하고 싶은 태그에 clear: left; (float가 left면 left고 right면 right를 적는다.)
만약 left, right 둘다 해제하고 싶은경우엔 clear: both;를 사용한다. 대부분 both를 사용한다.
See the Pen YzZJPrb by Hyemi Lee (@hhyemi) on CodePen.
clearfix 클래스를 추가하여 해제
clear:both;만 사용할 경우 다음 형제요소가 꼭 있어야 한다.
다음 형제요소가 없는경우에는 clearfix 클래스를 추가해서 해제해보자.
가상요소인 after를 사용하여 float를 적용한 부모요소::after를 사용한다.
See the Pen NWpOqWv by Hyemi Lee (@hhyemi) on CodePen.
먼저 회색박스(.box)인 태그에만 float:left를 적용하면 하늘색박스(.new-box)가 겹치게 된다.
See the Pen wvJYBxz by Hyemi Lee (@hhyemi) on CodePen.
회색박스(.box)인 태그들에 float:left를 적용하고 부모요소에 .clearfix::after를 추가한 결과이다.
float가 해제되어서 하늘색 상자 (.new-box)가 아래로 가는것을 볼 수 있다.
기본적으로 after나 before는 inline요소이기 때문에 줄바꿈을 하기 위해 display: block;을 사용해준다.
여기서 float있는 형제요소에는 floact없는 요소가 있지 않도록 한다.