# 플로팅 레이아웃

## 플로팅(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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shhn0509.gitbook.io/html-and-css/css-2/undefined/floating.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.