# float

* :green\_book: [Is CSS float deprecated?](https://css-tricks.com/is-css-float-deprecated/)
* :green\_book: [float](https://css-tricks.com/almanac/properties/f/float/) (CSS-Tricks)

## key points

* a **floated** element is automatically **`display: block`**.
* a **floated** element **remains** a part of the **page flow**, distinctly different than **absolutely positioned** elements, which are **removed** from the page flow.

## example

{% tabs %}
{% tab title="result" %}
:floppy\_disk: [replit](https://replit.com/@pegasusroe/float#style.css)

![](https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfvEFZnSBhKT6fJmus0%2F-Mgu1uR29fJS-OQrV4uY%2F-Mgu5pM3hNNmf3bTEzTT%2Ffloat.png?alt=media\&token=ec2ff941-2676-4f80-8e3a-e79b72b848ef)
{% endtab %}

{% tab title="CSS" %}
```css
/* Font Awesome */
@import url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css");

body {
    background: rgb(73, 72, 72);
    color: #ccc;
}

h3 {
    color: tomato;
}

code {
    border: thin solid black;
    padding: 1px 4px 2px;
    background-color: purple;
    border-radius: 4px;
}

/* -- custom styling for all icons -- */
.fas, .fab {
    border: 1px solid black;
    font-size: 48px;
    background-color: white;
    color: black;
}

/* -- custom styling for specific icons -- */
.fa-fish {
    color: salmon;
}

.fa-frog {
    color: green;
}

.fa-user-ninja.vanished {
    opacity: 0.8;
}

.fa-facebook {
    color: rgb(59, 91, 152);
}


/* float */
.float-right {
    float: right;
}

.clear-right {
    clear: right;
}
```
{% endtab %}

{% tab title="HTML" %}
```markup
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>

    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="script.js" defer></script>

  </head>
  <body>
    
    <h3>float: right</h3>
    <p>
        <i class="fas fa-fish float-right"></i>
        <i class="fas fa-frog float-right"></i>
        如果只有 <code>float:right</code> 會「水平堆疊」在一起。
    </p>
    <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro nesciunt quo sit voluptatum iusto vero iste eum illum libero, perspiciatis commodi quia deserunt harum dolor dolores dicta autem tempore reprehenderit.
    </p>

    <h3>float: right + clear: right</h3>
    <p>
        <i class="fas fa-arrow-alt-circle-right float-right"></i>
        <i class="fas fa-user-ninja vanished float-right"></i>
        <i class="fab fa-facebook float-right"></i>
        <i class="fas fa-car float-right clear-right"></i>
        <i class="fab fa-app-store float-right clear-right"></i>
        但如果是 <code>float:right + clear:right</code> 會「垂直堆疊」。
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quae ducimus dolores minima necessitatibus fuga, error consequuntur vitae asperiores, sequi ex inventore ipsum quidem illo libero explicabo numquam voluptas iure vel quam quod repellat commodi vero assumenda? Animi placeat accusantium in sed distinctio iste nostrum fuga esse nemo magnam. Voluptates?
    </p>

  </body>
</html>
```
{% endtab %}
{% endtabs %}
