Float

float

- (물 위를) 떠다니다. 라는 의미.

- float를 하면 부모로부터 집나간 아이가 된다. 형제들도 알지 못하게 된다. 따라서 이 공간은 빈공간이 되어버린다.

- float를 주면 해당 요소의 display가 block이 된다. 단, 한 줄 전체를 차지하는 것은 아니다.

※ width를 지정하지 않으면 float를 했을 때 최소 너비는 본인이 가지고 있는 content 너비이다.

여기서 수정할 수 있다. (VSCode에서 말고도 가능)

float를 줬을 때 display 현황

- .red에 float: left를 하니 밑에 있는 .orange가 사라진다. (.red 밑으로 들어갔기 때문이다)

- 부모 너비가 400px이고, 자식 3개의 너비가 200px일 때 다 float: left;를 하면 나머지 1개는 자리가 부족하므로 줄바꿈해서 밑에서 왼쪽으로 간다. (자신이 갈 수 있는 공간에서 왼쪽으로 움직임)

  → 이때 부모의 자식은 다 float가 되어서 부모는 가진 자식이 없기에 height 크기를 지정하지 않았다면 0이 된다.

 

float로 인해 망가진 레이아웃 고치기

1. overflow: hidden

- 부모 요소에 적용하는 속성이고, float로 인해 집나간 자식을 찾을 수 있다.

- 추천하진 않는다. 2번째 방법이 정석이다.

 

2. clear: left, clear: right, clear: both

- clear는 요소가 block인 것만 적용할 수 있다.

- clear: left  →  전체 자식의 세로영역의 왼쪽부분을 높이로 갖는다.

- clear: both  →  세로영역의 왼쪽 오른쪽 부분을 높이로 갖는다.

                      (왼쪽 중 오른쪽의 높이가 더 높다면 오른쪽으로 맞춘다.)

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

 

※ ::befor, ::after의 display는 inline이다. (적용한 요소가 block이라도!)

실습 파일: CSS/float/index.html