[CSS] float과 clear

 

📌 float과 clear

 

float

: 요소가 normal flow에서 벗어나 다음 요소 위에 띄워 이동하는 속성

• width 값을 주지 않으면 컨텐츠 크기만큼 작아지면서 뜬다.
• float된 자식 요소는 부모 요소의 높이(height)에 영향을 주지 않는다 (인식 X)
  부모에도 float가 적용되면 부모의 높이가 인식된다 (= display: flow-root;)
  
• float 요소는 기존에 떠있던 float 요소를 뺀 나머지 공간에서 이동한다.

• auto라는 기능을 인식할 수 없다.
  
  

 

 

✨ display: flow-root;

: 부모 요소가 자식 요소들을 감싸고 있을 때 자식 요소들이 부모 요소의 높이를 정확하게 반영하지 않는 문제를 해결한다.

• display: flow-root는 IE에서 지원 X
• display: flow-root를 사용하는 경우 clear: both는 사용하지 않아도 된다.

1. 자식 요소에 float 설정

2. 부모 요소에 display: flow-root 설정

.main {
    display: flow-root;
    min-height: 450px;
}

.group1 {
    width: 250px;
    float: left;
}

 

 

 

🔺 요소의 높이를 고정하는 것은 지양

➡ 높이를 고정하면 자식 요소가 overflow 되는 경우가 있다.

👉  minheight 사용하기!!!

 

🔺 float로 요소 배치

➡ 이중 float 이용하기

👉  순서가 일정한 것들을 태그로 하나로 묶고 float를 지정한다.

 

 

---

 

clear

: float 속성을 지닌 요소의 영향을 제어한다 .

• display: flow-root를 사용하는 경우 clear: both는 굳이 사용하지 않아도 된다.

 

- none: 어떤 플로팅된 요소도 영향을 받지 않는다. (기본값)

 

- left: 왼쪽 float 요소의 영향을 받지 않아 아래로 이동된다.

 

- right: 오른쪽 float 요소의 영향을 받지 않아 아래로 이동된다.

 

- both: 양쪽 float 요소의 영향을 받지 않아 아래로 이동된다.

 

See the Pen clear by nadia kwon (@nadia-kwon) on CodePen.

 

 

* float 공부할 때 보면 좋을 영상

 

---

참고

Block formatting context - CSS: Cascading Style Sheets | MDN

 

float - CSS: Cascading Style Sheets | MDN