Float

Właściwość CSS float jest używana do umieszczania elementu po lewej lub prawej stronie jego kontenera, pozwalając innym elementom tekstu lub obrazów na owijanie się wokół niego. Jest to często stosowane do układania obrazów w tekście na stronach www. W CSS3, float może przyjmować kilka wartości, w tym left, right, none (domyślna), i inherit (dziedziczy wartość od elementu nadrzędnego).

Przykłady użycia float

Poniżej znajduje się przykład pokazujący różne zastosowania float w CSS3, zawierający kompletny plik HTML z komentarzami opisującymi działanie poszczególnych elementów.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykłady użycia float w CSS3</title>
    <style>
        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }

        .float-left {
            float: left; /* Umieszcza element po lewej stronie */
            margin-right: 20px; /* Dodaje margines z prawej strony */
        }

        .float-right {
            float: right; /* Umieszcza element po prawej stronie */
            margin-left: 20px; /* Dodaje margines z lewej strony */
        }

        .no-float {
            float: none; /* Anuluje działanie float */
        }

        /* Styl dla paragrafów i obrazów */
        p, img {
            margin: 0 0 20px 0; /* Marginesy dla elementów */
        }
    </style>
</head>
<body>
    <h3>Przykład użycia float: left</h3>
    <div class="clearfix">
        <img src="example.jpg" alt="Przykład obrazka" class="float-left">
        <p>Ten tekst owija się wokół obrazka umieszczonego po lewej stronie, 
        dzięki zastosowaniu właściwości float: left na elemencie img.</p>
    </div>

    <h3>Przykład użycia float: right</h3>
    <div class="clearfix">
        <img src="example.jpg" alt="Przykład obrazka" class="float-right">
        <p>Ten tekst owija się wokół obrazka umieszczonego po prawej stronie, 
        dzięki zastosowaniu właściwości float: right na elemencie img.</p>
    </div>

    <h3>Przykład użycia float: none</h3>
    <p class="no-float">Ten paragraf nie zostanie owinięty wokół żadnego obrazka,
    ponieważ zastosowano do niego właściwość float: none, co jest wartością domyślną.</p>
</body>
</html>

Możliwe wartości dla float:

  • left: Element jest przesunięty do lewej krawędzi kontenera, a inne elementy owijają się wokół niego od prawej strony.
  • right: Element jest przesunięty do prawej krawędzi kontenera, a inne elementy owijają się wokół niego od lewej strony.
  • none: Anuluje każde przesunięcie elementu przez float. Jest to wartość domyślna.
  • inherit: Element dziedziczy wartość float od swojego elementu nadrzędnego.

Podsumowanie

Właściwość float w CSS3 umożliwia elastyczne pozycjonowanie elementów wewnątrz ich kontenerów.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top