float

📗 Is CSS float deprecated?
📗 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

/* 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;
}

<!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>

Previousvertical-align Nextvertical centering

Last updated 3 years ago

example

💾 replit

/* 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;
}

<!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>