Articles
Introdução ao CSS
Propriedades de CSS relacionadas ao Float

Propriedades de CSS relacionadas ao Float

Este artigo explica as propriedades de CSS relacionadas ao float.

Você pode aprender sobre os usos e a sintaxe das propriedades float e clear.

YouTube Video

HTML para Visualização

css-float.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-float.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Layout</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Layout Related Properties</h2>
20        </header>
21        <article>
22            <h3>float</h3>
23            <section style="height: auto; color: black;">
24                <header><h4>float: left</h4></header>
25                <section class="sample-view">
26                    <div class="float-left">float left</div>
27                    <div class="content">
28                        <p>
29                            paragraph 1-1
30                            paragraph 1-2
31                        </p>
32                        <p>paragraph 2</p>
33                    </div>
34                    <div class="clearfix"></div>
35                </section>
36            </section>
37        </article>
38    </main>
39</body>
40</html>

Propriedades de CSS relacionadas ao Float

Propriedades float e clear 

 1.float-left {
 2    float: left;
 3    width: 150px;
 4    margin-right: 20px;
 5    background-color: lightblue;
 6}
 7
 8.content {
 9    width: 300px;
10    height: 100px;
11}
12
13.content p {
14    background-color: lightblue;
15    margin: 10px;
16}
17
18.clearfix {
19    clear: both;
20    display: none;
21}

float é uma das propriedades do CSS usada para flutuar um elemento para a esquerda ou direita dentro de seu elemento pai, permitindo que outros elementos o envolvam. A propriedade float é frequentemente usada para posicionar imagens ou elementos de caixa ao redor do texto, mas seu uso diminuiu à medida que métodos de layout mais novos, como flex e grid, se tornaram comuns.

  • Na classe float-left, a propriedade float é definida como left. O elemento aplicado flutua para o lado esquerdo do elemento pai, e o próximo elemento é envolvido à direita.
  • Na classe clearfix, a propriedade clear é definida como both. Usar esta classe impede que o próximo elemento envolva o elemento flutuante. Aqui, impedimos que o próximo elemento flutue após a imagem para manter o layout.

Como usar float

Valores
  • left: Flutua o elemento para a esquerda, permitindo que outros elementos se envolvam à direita.
  • right: Flutua o elemento para a direita, permitindo que outros elementos se envolvam à esquerda.
  • none: Esta é o valor padrão e não flutua o elemento.
  • inherit: Herda o valor da propriedade float do elemento pai.
Propriedade clear
  • Ao usar float, o próximo elemento pode envolver o elemento flutuante. Para evitar isso, a propriedade clear é usada. Os valores para clear são os seguintes:.
    • left: Evita elementos flutuados para a esquerda.
    • right: Evita elementos flutuados à direita.
    • both: Evita elementos flutuados à esquerda e à direita.
    • none: Permite que elementos flutuem ao redor. Este é o valor padrão.

Notas

  • Ao usar float, pode ocorrer um problema em que a altura do elemento pai ignora a altura do elemento flutuado. Para evitar isso, utilize a técnica clearfix ou aplique overflow: hidden; no elemento pai.
  • No design responsivo ou em layouts complexos, float pode ser mais difícil de lidar em comparação com flex ou grid, por isso é recomendada a utilização de flex ou grid.
Resumo

float é uma técnica antiga para flutuar elementos à esquerda ou à direita, permitindo que textos ou outros elementos se ajustem ao redor, e às vezes ainda é usada para layouts simples ou ajuste de imagens. No entanto, para criar layouts mais flexíveis e fáceis, é recomendado o uso de flexbox ou grid.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Propriedades de CSS Relacionadas à Interface do Usuário