CSS) font-family float clear .clearfix::after { content: ""; clear: both; display: block;}

1) font-family

요소를 좌우 방향으로 띄움(수평 정렬)
※ 수평정렬을 위해서 더 많이 사용된다.
float을 대체하는 flex가 생겼음. 대부분은 flex박스를 사용한다.

속성 값

값	의미	기본값
none	요소 띄움 없음	none
left	왼쪽으로 띄움
right	오른쪽으로 띄움

 

사용법

float: 방향;

img {
	float: left;
}

 

 

 

※ 요소에 float 속성을 적용하면, 적용된 요소 주변으로 문자(text)가 흐르게 된다.

float 적용전

html

<article>
  <div class="picture"></div>
  Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
  <div class="text">
    Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
  </div>
</article>

css

article {
  
}
article .picture {
  width: 200px;
  height: 150px;
  background: tomato;
  /*	float: left; */
  margin-right: 20px;
  margin-buttom: 10px;
}
article .text {
/*   clear: left; */
}

출력 결과

 

float 적용후

html

<article>
  <div class="picture"></div>
  Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
  <div class="text">
    Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
  </div>
</article>

css

article {
  
}
article .picture {
  width: 200px;
  height: 150px;
  background: tomato;
  float: left;
  margin-right: 20px;
  margin-buttom: 10px;
}
article .text {
/*   clear: left; */
}

출력 결과

 

 

2) float 해제

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

1. 형제요소에 clear: (left, right, both) 추가하여 해제
2. 부모요소에 overflow: (hidden, auto) 추가하여 해제
3. 부모요소에 clearfix 클래스 추가하여 해제 (추천!)

 

 

형제 요소에서 해제 clear

float 속성이 추가된 요소의 다음 형제요소에 clear속성 추가

 

clear 적용후

※ 흐르는 부분을 지우고 깨끗하게 새로 시작

html

<article>
  <div class="picture"></div>
  Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
  <div class="text">
    Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
  </div>
</article>

css

article {
  
}
article .picture {
  width: 200px;
  height: 150px;
  background: tomato;
  float: left;
  margin-right: 20px;
  margin-buttom: 10px;
}
article .text {
  clear: left;
}

출력 결과

 

 

 

 

 

▶ div 태그로 감싸도 float가 쌓이는 것을 분리할 수 없다 -> 정렬 해제를 해줘야 한다.

 

 

 

▷ float의 문제점: .box4가 앞쪽으로 다시 만들어져 버린다.

 

 

 

 

 

※ clear의 속성으로는 left, right, both가 있다.
float는 항상 해제(clear)를 해가며 사용해야한다. 그렇지 않으면 겹치는 부분들이 생기고 꼬이게 된다.

 

부모 요소에서 해제1

float 속성이 추가된 요소의 부모요소에 overflow속성 추가

※ 문제점: overflow는 float라는 속성과 전혀 관계가 없다. 편법!

 

부모 요소에서 해제2(추천!)

float 속성이 추가된 요소의 부모요소에 미리 지정된 clearfix클래스 추가

 

추천 사용방법

적용전

html

<div class='float-box'>1</div>
<div class='float-box'>2</div>
<div class='float-box'>3</div>
<div class='float-box'>4</div>
<div class="new-box"></div>

css

.float-box {
  width: 100px;
  height:100px;
  background: orange;
  color: white;
  font-size: 30px;
  margin: 10px;
  float: left;
}
.new-box {
  width: 250px;
  height: 250px;
  background: red;
}

출력결과

 

 

 

 

 

 

이 아래만 봐도 됨

---

 

적용후

html

<div class="clearfix">
  <div class='float-box'>1</div>
  <div class='float-box'>2</div>
  <div class='float-box'>3</div>
  <div class='float-box'>4</div>
</div>
<div class="new-box"></div>
<div class="clearfix">
  <div class='float-box'>1</div>
  <div class='float-box'>2</div>
  <div class='float-box'>3</div>
  <div class='float-box'>4</div>
</div>
<div class="new-box"></div>

css

/* ::after는 선택한 요소의 맨 마지막 자식으로 요소를 하나 생성한다.*/
.clearfix::after { 
  content: ""; /* 마지막에 추가될 컨텐츠를 꼭 넣어줘야 한다.*/
  clear: both; /* clear를 float를 통해서 해제해준다.*/
  display: block; /* ::after는 인라인 요소이므로 block요소로 바꿔준다.*/
}
.float-box {
  width: 100px;
  height:100px;
  background: orange;
  color: white;
  font-size: 30px;
  margin: 10px;
  float: left;
}
.new-box {
  width: 250px;
  height: 250px;
  background: red;
}

※ clearfix::after를 사용하여 해결한다. 꿀팁!
위의 주석을 읽어보면 이해가능

::after

https://developer.mozilla.org/ko/docs/Web/CSS/::after

::after (:after) - CSS: Cascading Style Sheets | MDN

 

출력결과

 

이 코드 자주 쓸듯

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