Articles
Introducción a CSS
Propiedades de CSS relacionadas con float

Propiedades de CSS relacionadas con float

Este artículo explica las propiedades de CSS relacionadas con float.

Puedes aprender sobre los usos y la sintaxis de las propiedades float y clear.

YouTube Video

HTML para vista previa

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            <section style="height: auto; color: black;">
38                <header><h4>float: right</h4></header>
39                <section class="sample-view">
40                    <div class="float-right">float right</div>
41                    <div class="content">
42                        <p>
43                            paragraph 1-1
44                            paragraph 1-2
45                        </p>
46                        <p>paragraph 2</p>
47                    </div>
48                    <div class="clearfix"></div>
49                </section>
50            </section>
51        </article>
52    </main>
53</body>
54</html>

Propiedades de CSS relacionadas con float

Propiedades float y clear 

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

float es una de las propiedades de CSS que se utiliza para posicionar un elemento hacia la izquierda o derecha dentro de su elemento padre, permitiendo que otros elementos lo rodeen. La propiedad float se utiliza comúnmente para colocar imágenes o elementos de caja alrededor del texto, pero su uso ha disminuido con la popularización de nuevos métodos de diseño como flex y grid.

  • En la clase float-left, la propiedad float se establece en left. El elemento aplicado se posiciona al lado izquierdo del elemento padre, y el siguiente elemento se ajusta hacia la derecha.
  • La clase float-right establece la propiedad float en right. El elemento al que se aplica flota hacia el lado derecho de su elemento padre, y el elemento siguiente se ajusta por la izquierda.
  • En la clase clearfix, la propiedad clear se establece en both. Usar esta clase evita que el siguiente elemento se ajuste alrededor del elemento flotante.

Cómo usar float

Valores
  • left: Posiciona el elemento hacia la izquierda, permitiendo que los demás elementos se ajusten a la derecha.
  • right: Posiciona el elemento hacia la derecha, permitiendo que los demás elementos se ajusten a la izquierda.
  • none: Este es el valor predeterminado y no posiciona el elemento.
  • inherit: Hereda el valor de la propiedad float del elemento padre.
Propiedad clear
  • Al usar float, el siguiente elemento puede ajustarse alrededor del elemento flotante. Para evitar esto, se utiliza la propiedad clear. Los valores para clear son los siguientes:.
    • left: Evita elementos posicionados hacia la izquierda.
    • right: Evita elementos posicionados hacia la derecha.
    • both: Evita elementos posicionados tanto a la izquierda como a la derecha.
    • ninguno: Permite que los elementos floten alrededor. Este es el valor predeterminado.

Notas

  • Cuando se utiliza float, puede surgir un problema en el que la altura del elemento padre ignora la altura del elemento flotante. Para evitar esto, utiliza la técnica clearfix o overflow: hidden; en el elemento padre.
  • En diseño responsivo o layouts complejos, float puede ser más difícil de manejar en comparación con flex o grid, por lo que se recomienda el uso de flex o grid.
Resumen

float es una técnica antigua para flotar elementos a la izquierda o derecha, permitiendo que el texto u otros elementos se ajusten alrededor, y todavía se utiliza ocasionalmente para layouts simples o ajuste de imágenes. Sin embargo, para crear layouts más flexibles y fáciles, se recomienda usar flexbox o grid.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Propiedades de CSS relacionadas con la interfaz de usuarioDescripción General del Diseño Responsivo en CSS