[CSS] float

다양한 요소를 '띄워서' 정렬하는 속성을 가진다

보통 블록 속성을 가진 객체를 정렬하는 방법으로 사용된다

left와 right밖에 없다

img {
  width:200px;
  float:left;
}

 

 

float의 문제점

앞으로 붕뜨는 현상이 일어난다

부모 요소가  float된 자식 요소의 넓이를 캐치하지 못해 발생 👉 float된 요소가 nomarl flow에서 벗어났기 때문(*inline 요소들은 float된 요소들을 알아본다)

float 속성을 주면 넓이값, 높이값 등이 사라지기 때문에 넓이, 높이 등을 주어야 한다

.wrap {
  border: 4px solid blue;
}

.content{
  margin: 5px;
  height: 20px;
  border: 2px solid green;
}

.wrap {
  border: 4px solid blue;
}
.content{
  float: left; 👈
  margin: 5px;
  height: 20px;
  border: 2px solid green;
}

 

해결방법

 

1. 부모 요소에 overflow 속성을 추가한다

 overflow:hidden 

부모가 float된 자식을 알아보는 것 뿐이지 모든 것을 해결해 주지 않는다

 

2. 부모 요소에 높이 값을 직접 지정한다 

강제로 높이를 주어 늘리는 것이므로 좋은 방법이 아니다(비효율적)

 

3. float가 사용된 요소 바로 다음의 형제 요소에게  clear:both;  사용

normal flow는 float를 알아볼 수 없다 > 알아볼 수 있게 나온 요소들이 clear

 

4. clear-flx

부모::after > 가상 요소 사용

after는 부모 요소의 가장 마지막 요소로 들어간다

ul::after {
	display: block; 👈 after 요소는 inline인데, block으로 변경
	content: '';
	clear:both;
}

 

✅ 가상요소는 왜 만드는 건가?

: 불필요한 html 요소를 제거하기 위해