# 플로팅 레이아웃

## 플로팅(Floating) 레이아웃

* 일반적인 레이아웃 흐름(Normal Layout Flow)
* HTML이 기본적으로 화면에 렌더링하는 것을 말함. 마크업 순서대로 위에서 부터 아래 방향으로 나열(CSS 미반영)
* float 속성을 사용해 박스를 왼쪽(left) 또는 오른쪽(right)으로 **"부유"**시키는 레이아웃 기법.

## \<float> 속성

속성 : `<none>`(기본값), `<left>`, `<right>`

```css
/* 부모요소는 float으로만 구성된 자식요소를 감싸지 못함*/
/* Clearfix, 가상요소를 사용해서 문제 해결가능*/
.box.is-blue {
  float: left;
  width: 200px;
}
.box.is-yellow {
  float: left;
}
.box.is-green {
  float: left;
}

.clear {
  clear: both;
}
```

```markup
<!-- 이해를 돕기위한 코드 많이 사용하지 X -->
  <div class="box-group">
    <div class="box is-blue"></div>
    <div class="box is-yellow"></div>
    <div class="box is-green"></div>
    <div class="clear"></div>
  </div>
</section>
```

## \<clear>&#x20;

float를 해제시키는 속성 (부모요소가 자식을 감쌀 수 있게 함)

```css
.clear {
  clear: none; /**/
  clear: left; /* float: left 해지 */
  clear: right; /*  */
  clear: both; /* 주로 많이 씀 */
}
```

### 가상 요소 <::after> 사용

```css
.clearfix::after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  height: 0; /* content가 높이를 가지게 되면 사용 */
}
```

## 참고

* [CSS 레이아웃](https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout)
* [CSS 레이아웃을 배웁시다 - normal layout flow](http://ko.learnlayout.com/no-layout.html)
* [CSS 레이아웃을 배웁시다 - float](http://ko.learnlayout.com/float.html)
* [CSS 레이아웃을 배웁시다 - clear](http://ko.learnlayout.com/clear.html)
* [CSS 레이아웃을 배웁시다 - clearfix](http://ko.learnlayout.com/clearfix.html)
* [CSS 레이아웃을 배웁시다 - float layout](http://ko.learnlayout.com/float-layout.html)
* [float을 clear하는 방법(clearfix)](https://takeu.tistory.com/20)