[CSS] float & clear / flex 예제

목표

들어가기에 앞서...

- flex 이론 잡기

https://ddorang-d.tistory.com/12

[CSS]float 이해하기 & clear하는 방법

- float & clear 하는 또 다른 방법들

https://velog.io/@hsecode/CSS-float-%ED%95%B4%EC%A0%9C%ED%95%98%EA%B8%B0-float-clear

[CSS] float clear, float 해제 방법 7가지

- clear에 대한 개념 잡기

https://developer.mozilla.org/ko/docs/Web/CSS/clear#examples

clear - CSS: Cascading Style Sheets | MDN

 

 

---

 

방법1) float, clear 이용하기 1 : float 기본 개념 이용

 

  3번째(마지막) 박스에 clear:left;를 써준다.

See the Pen Untitled by sol _ (@sol-_) on CodePen.

 

 

 

---

 

방법2) float, clear 이용하기 2 : 가상요소 ::after 사용

 

background width, height를 사용하고 싶은 상황에서는 좋지 않은 방법.

이렇게 하는 방법보다 방법3처럼 html구조를 만드는 것을 추천

See the Pen Untitled by sol _ (@sol-_) on CodePen.

 

 

background width, height를 사용하고 싶은 상황에서는 좋지 않은 방법.

 

---

 

방법3) flex 사용하는 방법 (추천) : html 구조에 주목

 

See the Pen Untitled by sol _ (@sol-_) on CodePen.

 

 

• display : flex container의 화면 출력 특성
  • (flex container 만들 때 들어있어야 함)
  • flex : 블록 요소 처럼 flex container 정의 (상->하로 flex container들이 쌓임)
  • inline-flex : 인라인 요소처럼 flex container 정의 (좌->우로 flex container들이 쌓임)

---

 

방법4) flex-wrap을 사용하는 방법 (낫베드)

 

See the Pen Untitled by sol _ (@sol-_) on CodePen.

 

 

• flex-wrap : flex items 묶음(줄 바꿈) 여부
  • 기본값: nowarp = 줄바꿈 없음 = 한 줄로 정렬
  • 설정할 수 있는 값
    • wrap : 여러 줄로 묶음 ( flex-wrap: wrap; )

• align-content : 교차 축의 여러 줄 정렬 방법 (기본적으로 수직정렬에 대한 개념)
  • 필수 요구사항: 정렬가능한 빈 공간 / item들이 두 줄 이상(flex-wrap:wrap; 존재)
  • 기본값: stretch (flex items를 시작점으로 정렬)
  • 설정할 수 있는 값
    • flex-start : flex items를 시작점으로 정렬
    • flex-end : flex items를 끝점으로 정렬
    • center : flex items를 가운데로 정렬

• align-items​ : 교차 축의 한 줄 정렬 방법 (기본적으로 수직정렬에 대한 개념)
  • 필수 요구사항: 정렬가능한 빈 공간 / item들이 두 줄 이상(flex-wrap:wrap; 존재=여러줄 가능)
  • 기본값: stretch (flex items를 시작점으로 정렬)
  • 설정할 수 있는 값
    • flex-start : flex items를 시작점으로 정렬
    • flex-end : flex items를 끝점으로 정렬
    • center : flex items를 가운데로 정렬
    • baseline : flex items를 각 줄의 문자 기준선에 정렬

 

---

 

방법5) inline-block 속성 사용하기

inline-block을 사용할 땐 주의할 점이 있다. 바로 4px의 여백(간격)이 생긴다는 점이다.

처음에 짰던 코드인데 알 수 없는 여백이 생겼었다.. 원인은 'inline-block' !!!

inline 요소는 폰트의 영향을 받기 때문에 생기는 일이다.

<div class="first">1번째</div>
<div class="second">2번째</div>

여기서 '엔터'라는 공백이 생긴다.

따라서 아래와 같이 '엔터'를 없애주면 해결된다. (아래 codepen참고)

<div class="first">1번째</div><div class="second">2번째</div>

 

See the Pen Untitled by sol _ (@sol-_) on CodePen.

 

 

 

✨4px 간격을 없애는 또 다른 방법 
1) margin 속성 조절

margin-left:-4px​

2) 태그를 다음 줄에서 닫기

<div class="first">1번째</div
><div class="second">2번째</div
><div class="third">3번째</div>

3) float 사용하기

.first { float:left; }
.parent::after {
    display: block;
    content: "";
    clear: both;
}